您的位置:首页 > Web前端 > JQuery

jQuery 点击按钮,表格增加一行。

2017-03-27 23:14 615 查看
<!--首先 加载jQuery-->

<!-- 路径换成自己的路径-->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<!--创建一个点击按钮-->

<button  class="button"  onclick="addrow();">添加一行</button>

<!--创建一个表格-->

<table  class="table">

<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

</table>

<!--创建添加行函数-->

<script type="text/javascript">

function addrow(){

var tables = $('.table');

var addtr = $("<tr>"+
"<td><input type='text' name='name' /></td>"+
"<td><input type='text' name='age' /></td>"+
"<td><input type='text' name='sex' /></td>"+
"<td><span  onclick='deleteTrRow(this);'> 删除</span></td>"+
"</tr>");

      addtr.appendTo(tables);     

}

function deleteTrRow(tr){

    //多一个parent就代表向前一个标签,

    //本删除范围为<td><tr>两个标签,即向前两个parent

    //如果多一个parent就会删除整个table

    $(tr).parent().parent().remove();

    }

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: