html部分 写道<body onLoad="init();">
<table id="table" align="center">
<tbody id="newbody"></tbody>
</table>
<div>
<table width="800px" border="1px" align="center">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/></td> <td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="删除行"/></td> </tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="删除列"/></td> <td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="添加列"/></td> </tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="添加行"/></td></tr>
</table>
</div>
<div>
<table width="800px" border="1px" align="center">
<tr><td>从第<input type="text" id="beginRow" name="beginRow" value=""/> 行到 <input type="text" name="endRow" id="endRow" value=""/> 行</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid();"/> </td></tr>
<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/> 列到<input type="text" name="endCol" id="endCol" value=""/> 列</td></tr>
</table>
</div>
</body>生成表格，采用appendChild 写道function init(){
_table=document.getElementById ("table");
_table.border="1px";
_table.width="800px";
for(var i=1;i<10;i++){
var row=document.createElement ("tr");
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement ("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode ("第"+cell.id+"列"));
row.appendChild (cell);
}
document.getElementById("newbody").appendChild (row);
}
}添加行，使用appendChild方法 写道function addRow(){
var length=document.getElementById("table").rows.length;
/*document.getElementById("newbody").insertRow(length);
document.getElementById(length+1).setAttribute("id",length+2);*/
var tr=document.createElement("tr");
tr.id=length+1;
var td=document.createElement("td");
for(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("第"+td.id+"列"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild (tr);
}添加行的另一种方法insertRow 写道function addRow_withInsert(){
varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
var rowCount =document.getElementById("table").rows.length;
var countCell=document.getElementById("table").rows.item(0).cells.length;
for(var i=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
cell.id=(rowCount)+"/"+(i+1);
}
}删除行，采用deleteRow(row Index) 写道/*删除行，采用deleteRow(row Index)*/
function removeRow(){
/* var row=document.getElementById("2");
var index=row.rowIndex;
alert(index);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}添加列，采用insertCell(列位置)方法 写道function addCell(){
/*document.getElementById("table").rows.item(0).cells.length
用来获得表格的列数
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";
}
}删除列，采用deleteCell(列位置)的方法 写道/*删除列，采用deleteCell(列位置)的方法*/
function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}合并单元格（未实现） 写道我的代码有问题，主要是表格会乱掉，一直没有改好 ：
function rebulid(){
var beginRow=document.getElementById("beginRow").value;/*开始行*/
var endRow=document.getElementById("endRow").value;/*结束行*/
var beginCol=document.getElementById("beginCol").value;/*开始列*/
var endCol=document.getElementById("endCol").value;/*结束列*/
var tempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/
alert(tempCol);
var td=document.getElementById(tempCol);
/*删除要合并的单元格*/
for(var x=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
else{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}
分享到：
相关推荐
在JavaScript编程领域，动态添加行和列是一种常见的需求，特别是在处理表格数据时。这涉及到DOM（文档对象模型）操作，允许网页在不重新加载的情况下更新其结构和内容。以下是对如何使用JavaScript动态添加行和列的...
//创建一行 for(var i=0;i;i++){ var _tr=_table.insertRow(i); //创建八列 for(var j=0;j;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString...
在网页开发中，表格（Table）是展示数据的常用元素，而JavaScript（js）则提供了强大的功能来操作DOM（文档对象模型），包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行，...
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
在某些交互式应用中，用户可能需要动态地添加或删除表格行，以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个...
这个“用js实现的动态添加一行”的实践项目是针对AJAX和JavaScript技术的一个基础练习，它旨在帮助开发者掌握如何在不刷新页面的情况下更新DOM（Document Object Model）并实现异步通信。 首先，让我们深入了解一下...
在JavaScript编程中，动态添加列和自动计算人民币大小写是两个关键的技能点，尤其在开发财务相关的Web应用时。动态添加列涉及到DOM操作，而人民币大小写的转换则是处理金融数据本地化的一部分。 首先，我们来详细...
JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
在JavaScript编程中，动态添加行是一项常见的任务，特别是在构建数据驱动的Web应用或者处理表格数据时。这个技术允许用户在运行时向HTML表格或其他结构化元素中插入新的内容，提高用户体验，无需页面刷新。以下是对...
- **动态添加行和列**：在网页加载后，通过JavaScript动态地修改DOM（Document Object Model），即文档对象模型，以增加或删除表格的行和列。 ### 实现步骤详解 根据给定的部分内容，我们可以看到使用JavaScript来...
标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的，是使用SpreadJS库创建的一个示例，该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件，...
通过循环的方式为每一行和每一列创建相应的元素，并将它们添加到表格中。 ```javascript function setTable(trLineNumber, tdData) { var table = document.getElementById("table"); var row; var cell; for ...
在本文中，我们将深入探讨如何使用Element UI库与Vue.js框架结合，来创建一个功能丰富的可输入表格，这个表格不仅可以动态增加列，还支持编辑功能。Element UI是基于Vue.js的开源UI组件库，提供了丰富的界面元素，而...
【标题】"jsp特效仿EXCEL动态增加行和列"主要涉及的是在JSP（Java Server Pages）中实现的一种Web前端特效，它模仿了Excel电子表格的功能，允许用户动态地在表格中添加行和列。这种特效对于创建交互性强、数据操作...
js 添加行，js 添加列，其他有好多骗人的，我这个是真的,希望用得上的朋友有所帮助，嘿嘿
在本例中，我们将深入探讨如何实现"jqgrid行编辑+动态为其他列赋值"这一功能。 首先，我们需要理解jqGrid的行编辑功能。jqGrid允许用户在表格的每一行上进行编辑，这通常通过双击或点击编辑按钮来触发。默认情况下...
为了实现固定行和列，表格可能需要特殊的类名或ID，以便在JavaScript中进行选择和操作。 `jquery-1.3.1.js`是jQuery库的一个早期版本。虽然较旧，但它仍能支持基本的jQuery操作。在这个项目中，它提供了JavaScript...
7. **库和框架支持：** 有许多优秀的JavaScript库如jQuery, DataTables, Handsontable等，提供了更丰富的功能，包括动态添加和删除行和列。它们简化了DOM操作，提供了更友好的API，同时具备数据排序、过滤、分页等...