向表格中插入一行-CFANZ编程社区

向表格中插入一行
<!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>
0 条评论