`
hesihua
  • 浏览: 229144 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

js做增行和删行

 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>test.html</title>
 <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript"> 
function query(){
$("#table1 tbody").html("");
var addTR="<tr><td><input type='checkbox' id='tr1'></th><th>姓名1</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr2'></th><th>姓名2</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr3'></th><th>姓名3</th><th>男</th><th>20</th></tr>";
addTR= addTR+"<tr><td><input type='checkbox' id='tr4'></th><th>姓名4</th><th>男</th><th>20</th></tr>";
$("#table1 tbody").append(addTR);
}

 function setDel()
{
$("#table1").find("input:checked").each(function(){
$(this).parent().parent().html("");
});
}
 function setAdd()
{
var addTR="<tr><td><input type='checkbox' id='tr1'></td><td>新增</td><td>男</td><td>20</td></tr>";
$("#table1 tbody").append(addTR);
}
</script>
 </head>

 <body>
  <fieldset>
   <legend>
    操作
   </legend>
   <input type="button" value="删除" onClick="setDel()" />
   <input type="button" value="添加" onClick="setAdd()" />
   <input type="button" value="查询" onClick="query()" />
  </fieldset>
  <fieldset>
   <legend>
    数据结果
   </legend>
   <table id="table1" bordercolor="1">
    <thead>
     <tr>
      <th>
       操作
      </th>
      <th>
       姓名
      </th>
      <th>
       性别
      </th>
      <th>
       年龄
      </th>
     </tr>
    </thead>
    <tbody>

    </tbody>
   </table>
  </fieldset>
 </body>
 </html>

 

 

上面的显示结果就是可以在选择了某一行后进行删除，或者给网格增加一个空行。

分享到：
| java表达式类型转换
评论
1 楼 hesihua 2012-02-03  
function setAdd() 
{ 
var addTR="<tr><td><input type='checkbox' id='tr1'></td><td>新增</td><td>男</td><td>20</td></tr>"; 
$("#table1 tbody").append(addTR); 
} 
上面在网格中添加一行是一种方式，

下面采用另外一种方式进行添加一行：
var cell = document.createElement("td").appendchild(document.createTextNode("foo"));
var  row = document.createElement("tr").appendchild(cell);
document.getElementById("table1").appendchild(row);

这种方式是采用的ajax思想
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics