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

原文章:https://blog.csdn.net/lp847609814/article/details/67080649


<!--首先 加载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);'>&nbsp;删除</span></td>"+
"</tr>");

      addtr.appendTo(tables);     

}

function deleteTrRow(tr){
    //多一个parent就代表向前一个标签,
    //本删除范围为<td><tr>两个标签,即向前两个parent
    //如果多一个parent就会删除整个table
    $(
tr).parent().parent().remove();
    }

</script>



猜你喜欢

转载自blog.csdn.net/qq_36666181/article/details/80437259