目的:需要用JS创建一个表格,并且在点击表格中的某一个单元格时,改变其背景颜色,再点击该单元格背景色变回原来颜色。
技术点:可以用innerHTML来创建表格,用getElementsByTagName方法来获取表格的每一个单元格,从而控制其背景颜色。
页面效果如下:
<body>
<input type = "text" id = "row" style = "width:50px;"/>rows
<input type = "text" id = "col" style = "width:50px;"/>cols
<input type="button" value = "Create Table" onclick = "create_table(document.getElementById('row').value,document.getElementById('col').value)"/>
<div id = "table" ></div>
</body>
<script type="text/javascript"> function create_table(rows,cols){ /*创建表格*/ var table = document.getElementById("table"); var table_html = new Array(); table_html.push("<table style='border-collapse:collapse;'>"); for (var row = 0; row < rows ; row ++ ) { table_html.push("<tr>"); for (var col = 0; col < cols ; col ++ ) { table_html.push("<td style='border:1px solid black; height:20px; width:60px;'></td>") } table_html.push("</tr>"); } table_html.push("</table>"); table.innerHTML = table_html.join(''); /*点击表格单元格,单元格背景变颜色,适用于IE浏览器*/ var cols = table.getElementsByTagName("td"); for (j = 0; j < cols.length; j++ ) { cols[j].onclick = function() { this.style.backgroundColor = this.style.backgroundColor == '#bfdfff' ? '#FFFFFF' : '#bfdfff'; } } } </script>分别在文本框中输入表格的行数和列数,点击“ Create Table ”按钮,页面显示背景为白色的表格,点击表格某一单元格,其背景颜色变成蓝色,再点击该单元格,背景色变为白色。