创建并控制表格背景颜色

最新推荐文章于 2022-09-07 20:00:23 发布

w3090411045

最新推荐文章于 2022-09-07 20:00:23 发布

阅读量347

点赞数

文章标签： JavaScript UI XHTML ViewUI

本文链接：https://blog.csdn.net/w3090411045/article/details/84433173

版权

目的：需要用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 ”按钮，页面显示背景为白色的表格，点击表格某一单元格，其背景颜色变成蓝色，再点击该单元格，背景色变为白色。

w3090411045

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
创建并控制表格背景颜色

目的：需要用JS创建一个表格，并且在点击表格中的某一个单元格时，改变其背景颜色，再点击该单元格背景色变回原来颜色。技术点：可以用innerHTML来创建表格，用getElementsByTagName方法来获取表格的每一个单元格，从而控制其背景颜色。页面效果如下：&lt;body&gt; &lt;input type = "text" id = "row" style = "w...
复制链接

扫一扫