javascript添加删除表格数据行示例

  javascript添加删除表格数据行示例,居于jquery框架

<title>javascript添加删除表格数据行示例</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<table border="1">
    <tr><td>ID</td><th>姓名</th><th>联系电话</th><th>操作</th></tr><tbody id="tbRows">
    <tr id="trTpl"><td>1</td><td><input type="text" /></td><td><input type="text" /></td><td><a href="javascript:" onclick="addOrRemoveRow(this)">添加</a></td></tr>
</tbody>
</table>
<script>
    function addOrRemoveRow(a) {
        var add = a.innerHTML == '添加';
        if (add) {
            newRow = $('#trTpl').clone();
            newRow.find('td:first').html($('#tbRows tr').length+1);
            newRow.find('input').val('').end().find('a:last').html('删除');
            newRow.appendTo('#tbRows');
        }
        else {
            $(a).closest('tr').nextAll().find('td:first-child').each(function () { this.innerHTML = parseInt(this.innerHTML, 10) - 1; }).end().end().remove();
        }
    }
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:javascript添加删除表格数据行示例

评论(0)Web开发网
阅读(464)喜欢(0)JavaScript/Ajax开发技巧