CSS选择器不工作？

所以我创建了一个使用javascript和jQuery的表格，并且我希望它能够在您单击表格第一行上的td时，该列中其余的td将会下降。让我试着通过显示我的代码来解释它。下面是我的javascriptCSS选择器不工作？

$(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">

参数“高度”只是一个阵列，例如，它可以

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

它会创建一个使用这些单词的表，headerOne和headerTwo将位于第一行，someTd和anotherTd位于第二行。

我希望它使得.row0 .column0中的td具有默认的红色背景色。这很奇怪，因为$（'。row0'）。not（'。column0'）。on（{没有选择带有.row0 .column0的td，而.row0选择了它，而.column0选择它，所以它是class可以肯定的是.row0 .column0，但是，当我去到CSS和做

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

这是行不通的。当我尝试选择它作为一个查询选择像这样

$('.row0 .column0')

它仍然没有选择任何东西。怎么回事？

来源

2013-10-28 user2719875

.row0 .column0选择类column0这是descendan元素类别为row0。

.row0.column0选择与类column0和row0元件。

来源

2013-10-28 19:36:09

这里是一个简化的版本，我使用的表切换：

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

来源

2013-10-28 20:05:58

CSS选择器不工作？

回答

相关问题