CSS 选择器不起作用

CSS selectors not working?

本文关键字：不起作用 选择器 CSS      更新时间：2023-09-26

我正在使用Javascript和jQuery创建一个表，我希望它当您单击表第一行的td时，该列下拉列表中的其余td。让我尝试通过展示我的代码来解释它。这是我的Javascript： 

$(document).ready( function() {
    createTr(heights);  
});
function createTr (heights) {
    for (var h=0; h<heights.length; h++) {  // h is row number, i is column number!
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { // IF EXTRA TD'S ARE SHOWING< CHANGE 3 TO SOMETHING ELSE
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table, which is in the html
        if (h != 0) {
            $('.row' + h).addClass('invisible'); // hide all the rows except the first row
        }
        $('.column0').removeClass('invisible'); // show the first column
        $('.row0').not('.column0').on({
            mouseenter: function() {
                $(this).addClass('column0Hover');
            },
            mouseleave: function() {
                $(this).removeClass('column0Hover');
            }
        });
    } // end for
} // end function

这基本上创建了 td，每个 td 都类似于这种格式

<td class="rowh columni">

参数"heights"只是一个数组，例如，它可以是

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

它将使用这些单词创建一个表，headerOne 和 headerTwo 将在第一行，someTd 和 Another Td 将在第二行。

我希望它使 .row0 .column0 中的 td 默认具有红色的背景色。这太奇怪了，因为$('.row0').not('.column0').on({没有选择带有 .row0 .column0 的 td ，而.row0选择了它，并且.column0选择了它，所以它的类肯定是.row0 .column0，但是，当我去 CSS 并做

.row0 .cloumn0 {
    background-color: #063 !important;
}

它不起作用。当我尝试选择它作为查询选择器时，就像这样

$('.row0 .column0')

它仍然没有选择任何内容。怎么来了？

.row0 .column0选择具有类column0的元素，这些元素是具有类row0的元素的后代。

.row0.column0选择类为 column0 和 row0 的元素。

这是我用于表格切换的简化版本：

<body>
    <style>
      #myTable tbody{display:none;}
      #myTable th:hover{cursor:pointer;}
    </style>
    <table id="myTable">
      <thead>
        <tr>
          <th rel="row1" colspan="2">My row title 1</th>
        </tr>
      </thead>
      <tbody id="row1">
          <tr>
            <td>My Data 1</td>
            <td>My Data 2</td>
          </tr>
      </tbody>
      <thead>
        <tr>
          <th rel="row2" colspan="2">My row title 2</th>
        </tr>
      </thead>
      <tbody id="row2">
          <tr>
            <td>My Data 1</td>
            <td>My Data 2</td>
          </tr>
      </tbody>
    </table>
    <script>
      $(function(){
        $('#myTable').on('click','th',function(){
          var link = $(this).attr('rel');
          $('#' + link).toggle();
        });
      });
    </script>
</body>
相关文章：