javascript操作表格Table　

最新推荐文章于 2023-06-12 12:00:40 发布
最新推荐文章于 2023-06-12 12:00:40 发布
阅读量124 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Java 文章标签： JavaScript IE 单元测试 Firefox CSS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhanghw0917/article/details/88338100
本文介绍了一种使用JavaScript操作HTML表格的方法，包括创建表格、添加行和单元格、删除行等功能，并提供了示例代码。还讨论了不同浏览器下操作table标签的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

自： http://fulong258.blog.163.com/blog/static/1789504420088229280691/

 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> JS操作表格 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
   
<body>
   
</body>
<script language="javascript">
//添加表格

function loadTable()
{
    var tb = document.createElement("table");
    var rowTitle = tb.insertRow();
    var cellTitle1= rowTitle.insertCell();
    var cellTitle2= rowTitle.insertCell();
    cellTitle2.colSpan = 2;
    cellTitle2.align = "right";
    cellTitle2.innerHTML = "<input type = 'button' value= '确定' onclick='addRow(this.parentElement)'>";
    cellTitle1.innerHTML = "<span>添加</span>";
    loadSelect(cellTitle1);
   
    for(var i = 0; i < 10; i++){
        var row = tb.insertRow();//添加行

        loadCells(row, i);
    }
    //设置属性

    tb.id = "tb";
    tb.align="center";
    tb.cellPadding = 1;
    tb.bgColor="#ffffee";
    tb.style.borderWidth = "1px";
    tb.style.borderCollapse = "collapse";
    tb.style.borderStyle = "solid";
    tb.rules = "ALL";//应用全部

    tb.borderColor = "#000000";
    document.body.appendChild(tb);
}
//添加单元格

function loadCells(rowObj,m)
{
    var cell1 = rowObj.insertCell();//添加单元格

    var cell2 = rowObj.insertCell();//添加第二个单元格

    var cell3 = rowObj.insertCell();
   
    cell1.innerHTML = "&nbsp;" + parseInt(m + 1) + "&nbsp;";
    cell2.innerHTML = "<input type='text' name='txt_name' value=''>";
    cell3.innerHTML = "<span style='cursor:hand;' onclick='delRow(this)'>&nbsp;×&nbsp;</span>";
}
//添加select框

function loadSelect(obj)
{
    var s = document.createElement("select");
    s.id = "sel_count";
    s.name = s.id;
    for(var i = 1; i <= 10; i++){
        var opt = new Option(i+"行",i);
        s.options.add(opt);
    }
    obj.appendChild(s);
}
//删除行

function delRow(obj)
{
    var tr = obj.parentElement.parentElement;
    var tb = tr.parentElement.parentElement;//table标签和tr标签隐式存在一个tbody

   
    tb.deleteRow(tr.rowIndex);
}
//选择好的个数的行，传入单元格

function addRow(obj)
{
    var tr = obj.parentElement;
    var cnt = (tr.cells[0]).children[1].value;//个数

    var tb = tr.parentElement.parentElement;
   
    var lastRow = tb.rows[tb.rows.length - 1];//获得当前最后一行

    var maxIndex= parseInt(lastRow.cells[0].innerText);//获得当前表格中显示的最好编号

   
    for(var i = 0; i < cnt; i++){
        var newRow = tb.insertRow();
        loadCells(newRow,parseInt(maxIndex + i));
    }
        
}
   
loadTable();
</script>
</html>

 

********************************************************************************

 

<html>
    <head>
        <title></title>
        <SCRIPT LANGUAGE="JavaScript">
        function showTable(id){
          var tb=document.getElementById(id);
          var rows=tb.rows;
          for(var i=0;i<rows.length;i++){
             var cells=rows[i].cells;
             for(var j=0;j<cells.length;j++){
                 alert(cells[j].childNodes[0].value);
             }
          }
         }
         function showTd(id){
             var td=document.getElementById(id);
             var cell=td.parentElement;
             alert(cell.childNodes[0].value);
             alert(cell.cellIndex);
         }
        </SCRIPT>
    </head>
    <body>
        <input type="button" onclick="showTable('mailTable');" value="遍历table"/>
        <input type="button" onclick="showTd('th01Input');" value="取得td的index"/>
        <table id="mailTable">
            <tr>
                <th><input value="th00"></th>
                <th><input name="th01Input" value="th01"></th>
            </tr>
            <tr>
                <td><input value="th10"></td>
                <td><input value="th11"></td>
            </tr>
            <tr>
                <td><input value="th20"></td>
                <td><input value="th21"></td>
            </tr>
        </table>
    </body>
</html>

另外ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，
在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，
使用appendChile方法也不管用。

//向table追加一个空行：
var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.innerHTML = " 测试";
otd.className = "css";
otr.appendChild(otd);

 

 

更多请进：
JS操作table
06-07
这是我对表的基本操作,对表重要的操作我都写了一下,希望对你们有帮助
javascript操作表格
12-09
总的来说，`Power Table`是一个利用JavaScript增强HTML表格功能的例子，它包括了数据排序、列交换、行/列操作等多种交互特性，使得静态的表格变得生动起来，提高了用户的互动性和数据管理的灵活性。开发者在编写这样...
Javascript操作表格
php|nginx|python|vue|redis|linux
06-16 898
                                                                         中国北京                                                                            中国上海                    
用js操作表格
weixin_30629977的博客
06-04 108
实现思路： 1.通过表单，可以添加数据到表格中显示2.id自动根据已有的最大id值进行累加，删除一条记录的时候，最大id值不会变化（id的值不是根据表格中编号的最大值去计算）3.隔行变色，新增加的行应该也需要隔行变色的4.鼠标移入高亮5.全选/全不选（checkAll和下面的每一个checkbox是有关联的）6.选中变色7.上移/下移8.删除9.排序 1 <!DOCTYPE ht...
javascript_操作表格
Twilight's Blog
03-14 334
表格的一些常用属性： caption(唯一) / tBodies / tFoot / tHead / rows / cells 一些常用方法： createTHead() / createCaption() / deleteTHead()获取caption table.caption.innerHTML 获取tBody中的列数 (tHead/tBodies) table.tBodies
JavaScript获取表格（table）当前行的值、删除行、增加行
10-24
在JavaScript中，操作HTML表格（table）是一种常见的需求，包括获取当前行的值、删除行以及增加行。本文提供了一段代码示例，演示了如何实现这些功能。 首先，我们来详细讲解如何获取表格当前行的值。在这个例子中...
javascript清空table表格的方法
10-24
JavaScript清空table表格的方法 在开发Web应用时，经常需要对表格数据进行动态操作，包括清空表格中的所有数据。在JavaScript中，可以通过多种方法来清空一个HTML的table元素。本文将详细介绍几种常见的清空table...
javascript 操作table的特性
11-30
JavaScript 操作表格（Table）是网页动态交互中的重要一环，它允许开发者对HTML表格进行创建、修改和操控，提供了一种灵活的方式来处理数据展示。在网页开发中，JavaScript提供了丰富的API来实现对表格的控制，包括...
JavaScript 设置动态表格
O_osange的博客
01-11 1274
JavaScript 设置动态表格
js操作表格的方法介绍
04-14
NULL 博文链接：https://zyz.iteye.com/blog/1743610
js动态设置表格
08-30 167
222      if (screen.width == 800) {    }    else if (screen.width == 1024) {        var bg = document.getElementById("mytable");        bg.style.width = "400px";    }    else {    }
JS 创建表格
weixin_50784508的博客
06-12 931
【代码】JS 创建表格。
JavaScript操作表格
独孤听雨
12-15 477
html> html lang="en"> head> meta charset="UTF-8"> title>Adding and Removing Elementstitle> style> table{ border-collapse: collapse; } td,th{
JS操作html表格
懒猫猫IT
08-06 494
"http://www.w3.org/TR/html4/loose.dtd"> js操作表格 /*生成表格，采用appendChild*/  function init(){        _table=document.getElementById("table");      _table.border="1px";      _table.width="800px
js动态插入表格设置表格样式
freego1026的专栏
10-10 1739
//得到表格对象 表格中插入一行     方法一：设置css class方式，如下，“table01-td01"为一css class样式var mytd= row.insertCell();   mytd.className="table01-td01";  方法二：直接设置style属性，如下    row .style.back
html中用js操作表格,原生js中用DOM操作table以及表格搜索功能
weixin_34471172的博客
06-15 476
DOM中table的便捷操作tBobies(数组) tHead tFoot rows(行) cells(单元格)ID姓名年龄1张三23window.onload = function () {var oTable = document.getElementById('table1')alert(oTable.getElementsByTagName('tbody')[0].getElementsB...
js对Table表格的操作
weixin_34408624的博客
04-01 455
js对Table表格的操作对于表格 Table javascript也提供了一些操作方法oTable.tHead 获取表格里面 tHead的元素oTable.tBodies 获取表格里面正文的元素oTable.tFoot 获取表格里面的底部元素rows行cells列示例如下:<scriptlanguage="javascript"&gt...
JavaScript操作表格技巧大全及下载指南
这只是JavaScript操作表格的一个基础示例，实际上根据不同的需求，JavaScript表格操作可以实现更加复杂和丰富的功能。 知识点九：现代JavaScript库和框架 随着前端开发的复杂性增加，现代JavaScript库如jQuery，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值