首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript 兑现动态增加行/删除行

2012-08-17 
javascript 实现动态增加行/删除行运行效果:?HTML代码:htmlbodyinput typebutton valuenew row

javascript 实现动态增加行/删除行

运行效果:


javascript 兑现动态增加行/删除行
?

HTML代码:

  <html>  <body>  <input type="button" value="new row" onclick="add_row()">  <table id="table2">  </table>  </body>  </html>

?

javascript代码:

<script> var row_index=0;     /*  * 增加一行  */  function  add_row()     {       var table2 = document.getElementById("table2");row_index++;      var new_row=table2.insertRow(table2.rows.length);  new_row.setAttribute("id", "row"+row_index);   var new_col=new_row.insertCell(0);  new_col.innerHTML="<input type='file' name='filename"+row_index+"' size='87' >";      var new_col=new_row.insertCell(1);      new_col.innerHTML="&nbsp;<input type='button' value='删除' onclick="delete_row('row"+row_index+ "')">";        document.getElementById("filename"+row_index).focus();   }     /*   * 删除一行   */  function delete_row(rname)     {  var table2 = document.getElementById("table2");    var i;      i=table2.rows(rname).rowIndex;      table2.deleteRow(i);    }   </script>

?

热点排行