jQuery技术

jquery动态增加表格,删除表格

字号+ 作者:H5之家 来源:H5之家 2017-07-31 13:00 我要评论( )

jquery动态增加表格,删除表格。看了好多人问jquery动态添加表格。写了一遍又一遍,现在决定写在这儿吧,让不会的人来看看。 第一种,在表格上面有个删除按钮,

看了好多人问jquery动态添加表格。写了一遍又一遍,现在决定写在这儿吧,让不会的人来看看。

第一种,在表格上面有个删除按钮,删除下面复选框的选中的值。

js:


<script>

$(function(){

$("#addrow").click(function(){

var len=document.getElementById("table1").getElementsByTagName("tr").length;

len = len-2;

var tr="<tr>"+

"<td>"+len+"</td>"+

"<td><input type=\"checkbox\" id=\"check1\" name=\"check\" onclick=\"check()\"></td>"+

"<td>01</td>"+

"<td>職稱</td>"+

"<td>01</td>"+

"<td>董事長</td>"+

"<td>boss</td>"+

"</tr>";

   $("#table1").append(tr);  

});

$("#delrow").click(function(){

var check = document.getElementsByName("check");

for(var i=0;i<check.length;i++){

if(check[i].checked){

document.getElementById('table1').deleteRow(i+3);

i--;

}

}

})

})

</script>

jsp:


<table>

<tr>

<td colspan="7">

<input type="button" value="帥選器">&nbsp;&nbsp;&nbsp;

<input type="button" value="新增" >&nbsp;&nbsp;&nbsp;

<input type="button" value="刪除" >&nbsp;&nbsp;&nbsp;

<input type="button" value="保存">&nbsp;&nbsp;&nbsp;

<input type="button" value="取消">&nbsp;&nbsp;&nbsp;

</td>

</tr>

<tr>

<td></td>

<td></td>

<td colspan="2">編號類別</td>

<td colspan="3">基礎編號 </td>

</tr>

<tr>

<td></td>

<td><input type="checkbox"></td>

<td><span>代號</span></td>

<td><span>民稱</span></td>

<td><span>代號</span></td>

<td><span>中文名稱</span></td>

<td><span>英文名稱</span></td>

</tr>

</table>

第二种:直接在添加的一行添加删除按钮:


js:


<script>

$(function(){

$("#addrow").click(function(){

var tr="<tr>"+

"<td>01</td>"+

"<td>董事長</td>"+

"<td><input type="button"/></td>"+

"</tr>";

   $("#table1").append(tr);  

});

})

function dele(r){

var len=$("#table1 tr").length;

if(len==2){

alert("您不能删除表头");

return;

}

if(confirm("确定删除?")){

var i=r.parentNode.parentNode.rowIndex;

document.getElementById('table1').deleteRow(i);

}

}

</script>

jsp中:

<talbe><tr><td>序号</td><td>标题</td><td>操作</td></tr></table>

另外导入jquery的库

本文出自 “IT邋遢员” 博客,请务必保留此出处

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery学习(一)

    jquery学习(一)

    2017-07-31 14:04

  • 一些事一些情在线收听 jquery一些代码

    一些事一些情在线收听 jquery一些代码

    2017-07-31 12:00

  • jQuery精品教程

    jQuery精品教程

    2017-07-30 13:00

  • 20个有用的PHP+jQuery组件教程

    20个有用的PHP+jQuery组件教程

    2017-07-30 12:01

网友点评
$