<!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="删除" /> </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>
向表格中插入一行
原创口袋里的小龙 博主文章分类:JavaScript ©著作权
©著作权归作者所有:来自51CTO博客作者口袋里的小龙的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
[element-ui] el-table 表格吸底 固定最后一行
【代码】[element-ui] el-table 表格吸底 固定最后一行。
vue.js 前端 javascript -
element ui表格记住点击行样式 element-ui表格
需求:在开发中会遇到很多表格嵌套表格的使用,一个父级表格通过展开行要打开子级的表格,如果利用官网中的展开行的方式去实现其实是有点困难的首先实现行展开,这个是用到了elementUI中的一个属性通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped s
element ui表格记住点击行样式 vue.js elementui javascript Powered by 金山文档