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

  
页面内容
Html代码  
<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();"/>  

<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
Js代码  
//添加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();   
  
    }  

//添加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中行操作

大小: 15.4 KB
查看图片附件

推荐链接
见证又一个准百万富翁的诞生！

20-30万急聘多名天才Java/MTA软件工程师
3G培训就业月薪平均7K+，不3K就业不花一分钱！

笨点也好~~~~