1. 程式人生 > >增加刪除的js

增加刪除的js

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <script src="jquery-1.7.2.js"></script>
  <script>
    $(function(){
        $("a").click(function(){
            $("table").append("<tr><td><input type='checkbox'></td>"+
            "<td>張三</td>"+
            "<td>男</td>"+
            "<td>655315222351555</td>"+
            "<td>短工</td>"+
            "<td>1862025885</td>"+
            "<td>1995-11-11</td>"+
            "<td>10,000,00</td>"+
            "<td><img src='4.1.png'></td>"+
            "<td><img src='4.2.png' class='img2'></td></tr>");

            $("table tr:odd").css("background","#FAF3AA");
            $("table tr:even:not(:first)").css("background","#FCF4E2");
        })

        $(".img2").live("click",function(){
            $(this).parent().parent().remove();
        })

    })
  </script>
 </head>
 <body>
    <table cellpadding=10 cellspacing=0>
        <tr style="background:#EBE7DC">
            <td><input type="checkbox"></td>
            <td>姓名</td>
            <td>性別</td>
            <td>卡號</td>
            <td>會員級別</td>
            <td>電話號碼</td>
            <td>出生年月日</td>
            <td colspan=3>消費金額</td>
        </tr>
        <tr style="background:#FAF3E9">
            <td><input type="checkbox"></td>
            <td>張三</td>
            <td>男</td>
            <td>655315222351555</td>
            <td>短工</td>
            <td>1862025885</td>
            <td>1995-11-11</td>
            <td>10,000,00</td>
            <td><img src="1.png"></td>
            <td><img src="2.png" class="img2"></td>
        </tr>
        
  </table>
    <a href="javascript:void(0)">新增</a>
 </body>
</html>