需要根据按钮点击从表的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>
提前致谢。
答案 0 :(得分:1)
您需要使用属性选择器,因为Employee
是name
属性的值。
$('.recordRow td.hideThis[name="Employee"]').removeClass('hideThis');
此外,您可以微调选择器以仅包含类hideThis
hideThis
课程已分配到td
,因此您需要将其从td
中移除 - 无需使用:has()答案 1 :(得分:0)
在您的上下文中,name是一个属性而不是文本,因此您必须使用属性选择器来实现您想要的。
尝试,
$('.recordRow').find('td.hideThis[name="Employee"]').removeClass('hideThis');
根据您的新要求,您可以这样做,
var allTds = $('.recordRow').find('td');
var employeeTd = cache.find('.hideThis[name="Employee"]');
allTds.not(employeeTd).addClass('hideThis');
employeeTd.removeClass('hideThis');
答案 2 :(得分:0)
您可以在不使用JavaScript的情况下执行此操作,使用CSS执行此操作:
table td + td + td + td {
border: none;
}
我提供此解决方案是因为用户可能无法在其浏览器上提供JavaScript权限,在这种情况下,您的代码将无效。
您可以在此处找到类似的问题: