`
ql0722
  • 浏览: 7403 次
  • 性别: Icon_minigender_2
  • 来自: 黑龙江
最近访客 更多访客>>
社区版块
存档分类
最新评论

js给表格增加一行总结

IE 
阅读更多
大概看了一下网上对表格增加一行的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>
分享到:
评论

相关推荐

    JQuery实现动态表格点击按钮表格增加一行

    在本例中,变量`count`被用来跟踪新插入行的编号,每次增加一行时,`count`都会递增。变量的作用域决定了它们的可见性和生命周期,本例中`count`的作用域是全局的,这意味着它可以在`add`和`del`函数中被访问和修改...

    ASP+JS实现表格实时添加行

    这段JS代码首先获取了ID为`dynamicTable`的表格,然后在表格的最后一行插入新行,并对新行的每个单元格添加内容。你可以根据实际需求修改新插入的行和单元格的数据。 此外,`saveInfo.asp`可能是一个ASP文件,用于...

    Js实现表格头部第一行下拉固定

    为了解决这个问题,开发者通常会采用“表格头部第一行下拉固定”的技术,使得在滚动查看表格内容时,表头始终保持可见,方便用户对照查阅。本文将详细介绍如何使用JavaScript实现这一功能。 首先,理解这个需求的...

    表格动态插入行

    这将在表格的末尾添加一行,包含"数据1"和"数据2"。 为了使用户能够交互式地添加行,我们可能需要将此功能与按钮事件关联起来。例如,我们可以添加一个按钮,并在其点击事件中调用`addRow`: ```html (['新数据1',...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    javascript动态添加表格数据行

    总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...

    js 添加删除表格

    在JavaScript中,添加和删除表格是常见的操作,特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能,并提供一个简单的源码示例。首先,我们需要理解HTML表格的基本结构,然后利用...

    点击一按钮表结构就增加一行--js代码

    当用户点击“增加一行”按钮时,JavaScript 函数 `insRow()` 将被调用,从而在表格中增加新的一行。新行包含文本输入框、下拉选择框等控件,用户可以在这些控件中输入数据。每次调用函数时,都会自动生成带有唯一...

    js动态增加表格行

    js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释: 1. **动态创建DOM元素**: - 在JavaScript中,我们可以通过`document.createElement()`方法来创建新的HTML元素,如...

    纯javascript增加删除表格行

    2. **新增行**:要向表格添加新行,首先需要创建一个`&lt;tr&gt;`元素,然后为该行添加单元格(`&lt;td&gt;`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    JS实现的表格行上下移动操作示例

    在这个表格中,每一行的末尾都放置了两个超链接(`&lt;a&gt;`),分别用于执行上移(`moveUp`)和下移(`moveDown`)操作。 在这个示例中,`moveUp`函数和`moveDown`函数负责处理行的移动逻辑。这两个函数都接收一个参数...

    JS删除或者添加一行的代码

    标签解释:删除添加一行,指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释: 该代码主要实现了两个功能:动态添加表格行和删除表格行。下面对这两个功能进行详细解释: 动态添加表格行...

    javascript实现表格添加删除等操作

    - **创建新行**:要向表格添加行,首先需要创建一个新的`&lt;tr&gt;`元素,然后创建`&lt;td&gt;`元素并设置其内容。最后,将这些元素添加到表格的`&lt;tbody&gt;`标签内。 - **删除行**:通过获取行的引用(例如,通过点击事件的`...

    JavaScript动态添加删除表格行

    要动态添加一行,首先需要获取到表格的引用,通常是通过`document.getElementById`或`document.querySelector`来实现。然后,创建一个新的`&lt;tr&gt;`元素,并为它添加需要的`&lt;td&gt;`子元素。最后,使用`appendChild`或`...

    JAVASCRIPT自动添加表格

    在提供的压缩包文件“JS操作表格大全”中,可能包含了各种JavaScript操作表格的实例代码,包括但不限于以上所述的添加和删除操作,还可能涵盖排序、过滤、编辑等功能。学习并实践这些示例,将有助于提升你对...

    javascript动态操作表格

    // 创建一行 var row = document.createElement('tr'); // 在行中创建一个单元格 var cell = document.createElement('td'); cell.innerHTML = '新内容'; // 将单元格添加到行中 row.appendChild(cell); // 将行...

    javascript改变表格行的颜色

    // 遍历每一行 for (var i = 0; i ; i++) { // 添加鼠标移入事件 rows[i].addEventListener('mouseover', function() { this.style.backgroundColor = 'lightblue'; }); // 添加鼠标移出事件 rows[i]....

    js生成动态表格并为每个单元格添加单击事件的方法

    通过循环的方式为每一行和每一列创建相应的元素,并将它们添加到表格中。 ```javascript function setTable(trLineNumber, tdData) { var table = document.getElementById("table"); var row; var cell; for ...

    动态新增表格一行HTML页面源代码

    动态新增表格一行HTML页面源代码,用js实现的。

Global site tag (gtag.js) - Google Analytics