【javascript】 html使用javascript 向表格中插入一行

原创已于 2022-07-27 19:06:46 修改 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表格中新增行 #js添加行 #html添加元素 #table动态添加行

于 2013-07-25 14:46:11 首次发布

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

【HTML】

9 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态表格案例，该案例展示了如何通过按钮点击来添加新的行到HTML表格中，并且每行包含书籍名称、价格及操作按钮。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<script type="text/javascript">
//每一行的索引
var index = 3;
function btnAddRow(){
 //创建新行的id
 var rId = "tr" + index;
 //随机数
 var ranPrice = "￥" + Math.round((Math.random() * 100));
 //table对象
 var table1 = document.getElementById("table1");
 //行数
 var rowCount = table1.rows.length;
 //添加到最后一行
 var newRow = table1.insertRow(rowCount);
 //添加ID
 newRow.id = rId;
 //给第一列添加
 var newCell1 = newRow.insertCell(0);
 //内容
 newCell1.innerHTML = "西游记"+index;
 //给第二列添加
 var newCell2 = newRow.insertCell(1);
 //内容
 newCell2.innerHTML = ranPrice;
 //给第三列添加
 var newCell3 = newRow.insertCell(2);
 //内容
 newCell3.innerHTML = "<input type='button' name='button' id='button' value='删除'   />";
 //alert(newCell3.innerHTML);
 //变量++
 index ++;
}

</script>
</head>

<body>
<table id="table1" width="500" border="1" cellspacing="1" cellpadding="1">
  <tr id="tr0">
    <td>书名</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="tr1">
    <td>三国演义</td>
    <td>￥99</td>
    <td>
      <input type="button" name="button" id="button" value="删除" />&nbsp; </td>
  </tr>
  <tr id="tr2">
    <td>水浒传</td>
    <td>￥100</td>
    <td><input type="button" name="button2" id="button2" value="删除" /></td>
  </tr>
</table>
<p>
  <input type="button" name="button3" id="button3" value="新增一行" onclick="btnAddRow()" />
</p>
</body>
</html>