使用javascript点击添加或删除一行

标哥 2018-8-16 16:12:6 技术收藏 次阅读　查看评论

<pre name="code" class="html">
<html>
 
<head>
<title>js-sample</title>
 
<script type="text/javascript">
<!--
var count = 1;
function add() {
  var tbl = document.all.ci;
  var rows = tbl.rows.length;
  var tr = tbl.insertRow(rows);
   
  var name = tr.insertCell(0);
  name.innerHTML = '<input type="text">';
  var tel = tr.insertCell(1);
  tel.innerHTML = '<input type="text">';
  var rdo = tr.insertCell(2);
  rdo.innerHTML = '<input type="radio" value="0" name="rdo' + count + '">Yes <input type="radio" value="1" name="rdo' + count + '">No';
  var chk = tr.insertCell(3);
  chk.innerHTML = '<input type="checkbox" value="0" name="chk' + count + '">Modify <input type="checkbox" value="1" name="chk' + count + '">Delete';
  var del = tr.insertCell(4);
  del.innerHTML = '<input type="button" onclick="del(this)" value="Delete">';
  count++;
}
 
function del(btn) {
  var tr = btn.parentElement.parentElement;
  var tbl = tr.parentElement;
  tbl.deleteRow(tr.rowIndex-1);
}
//-->
</script>
</head>
 
<body>
 
<input type="button" onClick="add()" value="Add-Customer">
 
<table border="1" style="width:100%" id="ci" name="ci">
  <caption>customer information</caption>
  <thead>
  <tr>
  <th>Name</th>
  <th>Tel</th>
  <th>Radio</th>
  <th>CheckBox</th>
  <th>?</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td><input type="text" value="Zhang San"></td>
  <td><input type="text" value="111"></td>
  <td>
  <input type="radio" value="0" name="rdo">Yes <input type="radio" value="1" name="rdo">No
  </td>
  <td>
  <input type="checkbox" value="0" name="chk">Modify <input type="checkbox" value="1" name="chk">Delete
  </td>
  <td>
  <input type="button" onClick="del(this)" value="Delete">
  </td>
  </tr>
  </tbody>
</table>
 
</body>
</html>

TIM截图20190114161229.jpg

« 上一篇下一篇 » 心灵天空原创文章，转载请注明出处！如侵犯您的权益，请留言删除，谢谢合作！ 标签: 电脑网络相关  

相关日志:

评论列表:

说两句吧:

必填 *

选填 (邮箱仅用于留言回复通知，不会在网页显示。)

选填

记住我,下次回复时不用重新输入个人信息

控制面板
文章分类
最新留言
搜索
网站收藏
友情链接