Question

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

代码：

<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>

提前致谢。

Answer 1

您需要使用属性选择器，因为Employee是name属性的值。

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

此外，您可以微调选择器以仅包含类hideThis

的tds

hideThis课程已分配到td，因此您需要将其从td中移除 - 无需使用：has（）
：包含对文本内容的检查，在您检查属性值的情况下 - 使用属性选择器

Answer 2

在您的上下文中，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');

Answer 3

您可以在不使用JavaScript的情况下执行此操作，使用CSS执行此操作：

table td + td + td + td {
   border: none;
 }

我提供此解决方案是因为用户可能无法在其浏览器上提供JavaScript权限，在这种情况下，您的代码将无效。

您可以在此处找到类似的问题：

http://www.c-sharpcorner.com/Forums/

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

3 个答案: