mootools1.2 动态给table 添加删除行tr

最新推荐文章于 2021-06-07 19:08:08 发布

lanshang_aline

最新推荐文章于 2021-06-07 19:08:08 发布

阅读量252

点赞数

本文介绍使用MooTools 1.2实现网页表格的动态添加与删除功能。通过JavaScript函数createTable()向表格中添加行，并可通过delTable()函数删除指定行。此方法适用于需要用户交互更新表格数据的应用场景。

页面内容

<table class="cs-t-one" id="tablePersonNum">
  <thead> 
    <tr>
    <th class="header2" style="height: 14px"><div align="center">姓名</div></th>
    <th class="header2" style="height: 14px"><div align="center">证件</div></th>
    <th class="header2" style="height: 14px"><div align="center">地址</div></th>
    <th class="header2"style="height: 14px"><div align="center">操作</div></th> 
    </tr>   
  </thead>
<tbody id="tbodyPersonNum">
  </tbody>
                  </table>

<input type="button" value="测试" id="btnTable" onclick="createTable();"/>

js脚本 mootools 1.2

//添加tr 函数
function createTable() {
      //定义显示要的信息
        var str = "<input ReadOnly='true'  class='edit' type='text' id='txtName'  />";
        var str1 = "<input ReadOnly='true'  class='edit' type='text' id='txtIdentityID' />";
        var str2 = "<input ReadOnly='true'  class='edit' type='text' id='txtphone' />";
        var add = "<input type='button' id='btnAddBody'  class='cs-btnButton' value='添加'   onclick='createTable();' />"
        var del = "<input type='button' id='btnDelBody'  class='cs-btnButton' value='删除'   onclick='delTable(this);' />"
        //获取table的tbody 注意 要用tbody 
        var table = $('tbodyPersonNum');
        var tr = new Element('tr', { 'id': "tr1" });
        //注入到tr中  默认是放到最后
        var td = new Element('td', { 'html': str }).inject(tr);
        var td1 = new Element('td', { 'html': str1 }).inject(tr);
        var td2 = new Element('td', { 'html': str2 }).inject(tr);
        var td3 = new Element('td', { 'html': add +""+ del }).inject(tr);
       //tr 添加到tbody 中
        tr.inject(table);
    }
//删除tr 函数 
    function delTable(obj) {
       //从dom中删除元素
        $(obj.parentNode.parentNode).destroy();

    }

这样就完成了动态添加删除table中行操作