JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:JavaScriptvarn=0;functionshowTable(len){wi('');for(i=0;i

复制代码 代码如下:

<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"><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教程学习
热门Javascript教程学习
编程开发子分类