手记

使用jquery实现表格的动态添加和删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

    <script type="text/javascript" src="jquery-1.1.3.pack.js"></script>
    </head>

    <body>
        <table id="tableBody" name="tableBody" border='1'>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr id="trBody" name="trBody">
                <td id="1">1</td>
                <td id="2">2</td>
                <td id="3">3</td>
            </tr>
        </table>
        <input type="button" onClick="addTr();" value="add" />
    </body>
   
    <script type="text/javascript">
        function addTr(){

//使用克隆的方法动态创建表格
            var trClone = $("#trBody").clone(true);
            trClone.find("#1").text("1");
            trClone.find("#2").text("2");
            trClone.find("#3").text("3");
            trClone.find("#3").bind("click",function(){deleteTr(this)});
            trClone.attr("id","trnum");
            trClone.appendTo("#tableBody");
        }
       
        function deleteTr(elemt){

//获取要删除行的对象后调用删除方法remove()
            $(elemt).parent().remove();
        }
    </script>
 </html>
 

0人推荐
随时随地看视频
慕课网APP