JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2018-10-12 13:52
876 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript</title>
</head>
<body>
<script language="javascript">
var n = 0;
function showTable(len) {
wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
for (i=0;i<len;i++) {
if (parseInt(i%2)==1) {
bg = '#F4FAC7';
} else {
bg = 'white';
}
wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>');
}
wi('</tbody></table><br />');
wi('<input type="button" value="Add" id="add" />');
}
function wi(str) {
return document.write(str);
}
showTable(10);
var add = document.getElementById("add");
add.onclick = function() {
n = n+1;
if (n%2==0) {
bg = '#F4FAC7';
} else {
bg = 'white';
}
var table = document.getElementById("table");
var tr = document.createElement("tr");
tr.bgColor = bg;
var td = document.createElement("td");
td.innerHTML = '第'+(10+n)+'行';
tr.appendChild(td);
table.appendChild(tr);
}
</script>
</body>
</html>
您可能感兴趣的文章:
相关文章推荐
- JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
- JavaScript 操作table,可以新增行和列并且隔一行换背景色
- JavaScript 操作table,可以新增行和列并且隔一行换背景色
- javascript修改表格背景色实例代码分享
- iOS开发tableView中如何使headView与上边岩向下偏移,一行代码就可以搞定
- JavaScript后台代码操作HTML TABLE的方法
- 【java神操作】java竟然还可以能执行Javascript代码!!
- 命题:jquery操作table,新增一行,删除一行,模块化,粒度化
- javascript修改表格背景色实例代码分享
- 一个JQuery操作Table的代码分享
- javascript删除Table中的一行的脚本代码
- JavaScript后台代码操作HTML TABLE的方法
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- javascript删除Table中的一行的脚本代码
- javascript开发系列(table操作,table增加一行,删除一行,取行号,列号)
- JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
- 【代码片段】javascript下新增、删除一行/选中文字变颜色
- 一个JQuery操作Table的代码分享
- Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
- Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)