gpt4 book ai didi

javascript - 需要从表的 TD 添加/删除类

转载 作者:太空宇宙 更新时间:2023-11-04 13:49:03 25 4
gpt4 key购买 nike

需要根据按钮单击从表的 TD 添加/删除类。默认情况下,所有 TD 都将被隐藏。单击按钮时,我需要单独启用相应的 TD。

JSFiddle:http://jsfiddle.net/eVj8V/2/

代码:

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style>
.hideThis {display: none;}
td, th {
border: thin solid;
}
</style>

<script>

function constrctTable() {
var TableRef = document.getElementById("TableConstruction");
TableRef.innerHTML = "";
var table = "";
table += "<table>";
table += "<tr style='border: inherit;' id='tableColumns'>";
table += "<td>S.No</td>";
table += "<td>Name</td>";
table += "<td class=hideThis>Employee No</td>";
table += "<td class=hideThis>Manager No</td>";
table += "<td class=hideThis>Clerk No</td>";


table += "</tr>";
for(i=0; i<5; i++) {
table += "<tr class=recordRow>";
table += "<td>"+i+"</td>";
table += "<td>Raj "+i+"</td>";
table += "<td class=hideThis name='Employee'>"+ i +"</td>";
table += "<td class=hideThis name='Manager'>"+ i +"</td>";
table += "<td class=hideThis name='Clerk'>"+ i +"</td>";
table += "</tr>";
}
table += "</table>";

TableRef.innerHTML = table;
}


function enableEmployee(enableRef) {
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}


function enableManager(enableRef) {
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}

function enableClerk(enableRef) {
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}

</script>

</head>

<body onload="constrctTable();">

<div id="TableConstruction"> </div>

<button type="button" onclick="enableEmployee('Employee')"> Employee </button>
<button type="button" onclick="enableManager('Manager')"> Manager </button>
<button type="button" onclick="enableClerk('Clerk')"> Clerk </button>
</body>


</html>

提前致谢。

最佳答案

您需要使用属性选择器,因为 Employeename 属性的值。

$('.recordRow td.hideThis[name="Employee"]').removeClass('hideThis');

您还可以微调选择器以仅包含类 hideThis

的 tds
  • hideThis 类已分配给 td,因此您需要将其从 td 中删除 - 无需使用 :has()<
  • :包含对文本内容的检查,在您的情况下,您正在检查属性的值 - 使用属性选择器

关于javascript - 需要从表的 TD 添加/删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22341805/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com