读书人

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

发布时间: 2012-09-15 19:09:29 作者: rapoo

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

?

页面内容

<table id="tablePersonNum">  <thead>     <tr>    <th style="height: 14px"><div align="center">姓名</div></th>    <th style="height: 14px"><div align="center">证件</div></th>    <th style="height: 14px"><div align="center">地址</div></th>    <th 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中行操作

读书人网 >Web前端

热点推荐