使用 JAVASCRIPT 动态改变 HTML表格 CSS 样式

操作流程如下: 

 

图1 点击"click"单元格
图2 单元格改变颜色

 

代码如下:

<html>

<head>

<style type="text/css">
table, td, th
  {
  border:1px solid black;
  border-collapse:collapse;
  }

</style>

<script language="JavaScript">

function changColor()
{
  document.getElementById("td1").style.backgroundColor="#FF9900";
}

</script>

</head>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 JavaScript 来隐藏 HTML 动态表格的列。下面是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>隐藏HTML表格的列</title> <style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h1>动态表格的列</h1> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>城市</th> <th>国家</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>25</td> <td>北京</td> <td>中国</td> </tr> <tr> <td>李四</td> <td>女</td> <td>30</td> <td>上海</td> <td>中国</td> </tr> <tr> <td>John</td> <td>男</td> <td>35</td> <td>New York</td> <td>USA</td> </tr> </tbody> </table> <br> <button onclick="hideColumn(3)">隐藏城市列</button> <button onclick="hideColumn(4)">隐藏国家列</button> <br><br> <script type="text/javascript"> function hideColumn(colIndex) { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { var cells = rows[i].getElementsByTagName("td"); if (cells.length > colIndex) { cells[colIndex].style.display = "none"; } } } </script> </body> </html> ``` 这个示例代码中包含一个动态表格,以及两个按钮,分别用于隐藏“城市”列和“国家”列。当用户单击按钮时,JavaScript 函数 `hideColumn()` 会在表格中隐藏相应的列。您只需要指定要隐藏的列的索引即可。 该函数首先获取表格使用 `getElementById()` 方法),然后获取所有行和单元格。如果单元格的数量大于要隐藏的列的索引,则将其样式设置为 `display:none`,从而隐藏该列。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值