使用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>


« 上一篇 标哥原创文章,转载请注明出处! 标签:

相关日志:

评论列表:

说两句吧:

必填

选填

选填

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

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