zoukankan      html  css  js  c++  java

  • js动态添加和删除行

    1. <html>  
    2.   
    3. <head>  
    4. <title>js-sample</title>  
    5.   
    6. <script type="text/javascript">  
    7. <!--  
    8. var count = 1;  
    9. function add() {  
    10.   var tbl = document.all.ci;  
    11.   var rows = tbl.rows.length;  
    12.   var tr = tbl.insertRow(rows);  
    13.      
    14.   var name = tr.insertCell(0);  
    15.   name.innerHTML = '<input type="text">';  
    16.   var tel = tr.insertCell(1);  
    17.   tel.innerHTML = '<input type="text">';  
    18.   var rdo = tr.insertCell(2);  
    19.   rdo.innerHTML = '<input type="radio" value="0" name="rdo' + count + '">Yes <input type="radio" value="1" name="rdo' + count + '">No';  
    20.   var chk = tr.insertCell(3);  
    21.   chk.innerHTML = '<input type="checkbox" value="0" name="chk' + count + '">Modify <input type="checkbox" value="1" name="chk' + count + '">Delete';  
    22.   var del = tr.insertCell(4);  
    23.   del.innerHTML = '<input type="button" onclick="del(this)" value="Delete">';  
    24.   count++;  
    25. }  
    26.   
    27. function del(btn) {  
    28.   var tr = btn.parentElement.parentElement;  
    29.   var tbl = tr.parentElement;  
    30.   tbl.deleteRow(tr.rowIndex-1);  
    31. }  
    32. //-->  
    33. </script>  
    34. </head>  
    35.   
    36. <body>  
    37.   
    38. <input type="button" onclick="add()" value="Add-Customer">  
    39.   
    40. <table border="1" style="100%" id="ci" name="ci">  
    41.   <caption>customer information</caption>  
    42.   <thead>  
    43.   <tr>  
    44.   <th>Name</th>  
    45.   <th>Tel</th>  
    46.   <th>Radio</th>  
    47.   <th>CheckBox</th>  
    48.   <th> </th>  
    49.   </tr>  
    50.   </thead>  
    51.   <tbody>  
    52.   <tr>  
    53.   <td><input type="text" value="Zhang San"></td>  
    54.   <td><input type="text" value="111"></td>  
    55.   <td>  
    56.   <input type="radio" value="0" name="rdo">Yes <input type="radio" value="1" name="rdo">No  
    57.   </td>  
    58.   <td>  
    59.   <input type="checkbox" value="0" name="chk">Modify <input type="checkbox" value="1" name="chk">Delete  
    60.   </td>  
    61.   <td>  
    62.   <input type="button" onclick="del(this)" value="Delete">  
    63.   </td>  
    64.   </tr>  
    65.   </tbody>  
    66. </table>  
    67.   
    68. </body></html>  
  • 相关阅读:
    luoguP1600 天天爱跑步(NOIP2016)(主席树+树链剖分)
    luogu P3919 [模板]可持久化数组(可持久化线段树/平衡树)(主席树)
    luoguP3384 [模板]树链剖分
    luoguP2590 [ZJOI2008]树的统计(树链剖分)
    luoguP1505 [国家集训队]旅游(真的毒瘤)
    入手node
    小程序中如何实现评论中的点亮星星
    小程序学习网
    css3实现小程序的动画
    scroll-view
  • 原文地址：https://www.cnblogs.com/shenqz/p/6961047.html
Copyright © 2011-2022 走看看