大概看了一下网上对表格增加一行的js方法,基本上有两个方法
其中用到的childNodes方法在IE下与火狐下得到的DOM不同,table节点下均有tbody节点,但是IE获得tbody为表格Dom.childNodes[0], 火狐获得tbody为表格Dom.childNodes[1]。故需要两种写法
<script type="text/javascript">
方法一
function addRow1(){
var myTab = document.getElementById("myTab"); //"myTab"为表格的id
var index = myTab.rows.length;
//alert(index); //table共有几行
//var cellsize = myTab.childNodes[1].childNodes[0].cells.length; //火狐下
var cellsize = myTab.childNodes[0].childNodes[0].cells.length; //IE下
alert(cellsize); //一行有几列
var objRow = myTab.insertRow(index);
//var objCell = objRow.insertCell(0);
//objCell.innerHTML= "行号:"+index +"列号:1";
//var objCell = objRow.insertCell(1);
//objCell.innerHTML= "行号:"+index +"列号:2";
//var objCell = objRow.insertCell(2);
//objCell.innerHTML= "行号:"+index +"列号:3";
//var objCell = objRow.insertCell(3);
//objCell.innerHTML= "行号:"+index +"列号:4";
for(var i=0;i<cellsize;i++){
var objCell = objRow.insertCell(i);
objCell.innerHTML = i ;
}
objCell.style.color = "red";
}
方法二
var rowNum = 0;
function addRow2(){
var myTab = document.getElementById("myTab");
var objRow = document.createElement("tr");
for(var i=0;i<3;i++){
var objCell = document.createElement("td");
var tn = document.createTextNode(rowNum);
objCell.appendChild(tn);
objRow.appendChild(objCell);
}
rowNum++;
myTab.childNodes[0].appendChild(objRow); //IE
myTab.childNodes[1].appendChild(objRow); //火狐
}
</script>
分享到:
相关推荐
在本例中,变量`count`被用来跟踪新插入行的编号,每次增加一行时,`count`都会递增。变量的作用域决定了它们的可见性和生命周期,本例中`count`的作用域是全局的,这意味着它可以在`add`和`del`函数中被访问和修改...
这段JS代码首先获取了ID为`dynamicTable`的表格,然后在表格的最后一行插入新行,并对新行的每个单元格添加内容。你可以根据实际需求修改新插入的行和单元格的数据。 此外,`saveInfo.asp`可能是一个ASP文件,用于...
为了解决这个问题,开发者通常会采用“表格头部第一行下拉固定”的技术,使得在滚动查看表格内容时,表头始终保持可见,方便用户对照查阅。本文将详细介绍如何使用JavaScript实现这一功能。 首先,理解这个需求的...
这将在表格的末尾添加一行,包含"数据1"和"数据2"。 为了使用户能够交互式地添加行,我们可能需要将此功能与按钮事件关联起来。例如,我们可以添加一个按钮,并在其点击事件中调用`addRow`: ```html (['新数据1',...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含,其中包含`<tr>`(表格行)元素,每行内可以有多个`<td>`(表格数据单元格)或`...
总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
在JavaScript中,添加和删除表格是常见的操作,特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能,并提供一个简单的源码示例。首先,我们需要理解HTML表格的基本结构,然后利用...
当用户点击“增加一行”按钮时,JavaScript 函数 `insRow()` 将被调用,从而在表格中增加新的一行。新行包含文本输入框、下拉选择框等控件,用户可以在这些控件中输入数据。每次调用函数时,都会自动生成带有唯一...
js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行
以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释: 1. **动态创建DOM元素**: - 在JavaScript中,我们可以通过`document.createElement()`方法来创建新的HTML元素,如...
2. **新增行**:要向表格添加新行,首先需要创建一个`<tr>`元素,然后为该行添加单元格(`<td>`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`<tbody>`元素中。...
在这个表格中,每一行的末尾都放置了两个超链接(`<a>`),分别用于执行上移(`moveUp`)和下移(`moveDown`)操作。 在这个示例中,`moveUp`函数和`moveDown`函数负责处理行的移动逻辑。这两个函数都接收一个参数...
标签解释:删除添加一行,指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释: 该代码主要实现了两个功能:动态添加表格行和删除表格行。下面对这两个功能进行详细解释: 动态添加表格行...
- **创建新行**:要向表格添加行,首先需要创建一个新的`<tr>`元素,然后创建`<td>`元素并设置其内容。最后,将这些元素添加到表格的`<tbody>`标签内。 - **删除行**:通过获取行的引用(例如,通过点击事件的`...
要动态添加一行,首先需要获取到表格的引用,通常是通过`document.getElementById`或`document.querySelector`来实现。然后,创建一个新的`<tr>`元素,并为它添加需要的`<td>`子元素。最后,使用`appendChild`或`...
在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...
// 创建一行 var row = document.createElement('tr'); // 在行中创建一个单元格 var cell = document.createElement('td'); cell.innerHTML = '新内容'; // 将单元格添加到行中 row.appendChild(cell); // 将行...
// 遍历每一行 for (var i = 0; i ; i++) { // 添加鼠标移入事件 rows[i].addEventListener('mouseover', function() { this.style.backgroundColor = 'lightblue'; }); // 添加鼠标移出事件 rows[i]....
通过循环的方式为每一行和每一列创建相应的元素,并将它们添加到表格中。 ```javascript function setTable(trLineNumber, tdData) { var table = document.getElementById("table"); var row; var cell; for ...
动态新增表格一行HTML页面源代码,用js实现的。