zoukankan      html  css  js  c++  java
  • jquery table 的添加和删除

    jquery table 的添加和删除

    <script language="javascript" src="./jquery.js"></script>
    <table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
    <tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
    <tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>
    </table>
    <table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%">
    <tr id="4"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>
    </table>
    <input type="button" name="button" value="add" onclick="addtr('test');">
    <input type="button" name="button" value="del" onclick="deltr('test');">

    <script>
    //在id为test的table的最后增加一行
    function addtr(id){
    tr_id = $("#test>tbody>tr:last").attr("id");
    tr_id++;
    //alert(tr_id);
    str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";
    $('#'+id).append(str);
    }
    //删除id为test的table的最后一行
    function deltr(id){
    tr_id = $("#test>tbody>tr:last").attr("id");
    $('#'+tr_id).remove();
    }
    </script>

    http://hi.baidu.com/houyongxu/blog/item/aae6ae37fe572a1d91ef3979.html

  • 相关阅读:
    defer与async的区别
    Promise 的含义
    SCSS 与 Sass 异同
    CSS总结2
    CSS总结1
    jQuery-插件,优化
    jQuery-表格以及表单
    jQuery-事件以及动画
    jQuery-ajax
    jQuery-DOM操作
  • 原文地址:https://www.cnblogs.com/shiningrise/p/2235048.html
Copyright © 2011-2022 走看看