通过js向table添加或修改row及cell　

最新推荐文章于 2021-03-13 09:55:35 发布

原创最新推荐文章于 2021-03-13 09:55:35 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #function

本文介绍了一种使用JavaScript动态地向HTML表格中添加或修改数据的方法。这种方法可以根据页面需求自动调整表格的内容，确保显示的信息是最新的。

//取得table对象
        var tabObj = document.getElementById("tabTipResult");
    //目前table有多少行
        var rowCount = tabObj.rows.length;
    //每行有多少列
        var cellCount = tabObj.rows(0).cells.length;

        if(rowCount < pageCount)
        {
            for(var i=0;i< pageCount ;i++)
            {
        //循环向table增加新行
                var newRow = tabObj.insertRow(rowCount++);
                for(var j=0;j<cellCount;j++)
                {
            //每行的新列值
                    newRow.insertCell(j).innerHTML="无";
                }
            }
        }
        else
        {
            for(var i=1;i<= pageCount ;i++)
            {
                var tmpRow = tabObj.rows(i);
                for(var j=0;j<cellCount;j++)
                {
                    tmpRow.cells(j).innerHTML="无";
                }
        //该行的背景色属性
        tmpRow .onmouseout = function(){this.bgColor="white";};
        tmpRow .onmouseover= function(){this.bgColor="#efffff";};
        //td 在 onclick事件
        tmpRow .cells(0).onclick = function(){ alert("");};
            }
        }
         //删除列
      document.getElementById(tabTipResult).deleteRow(index);