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選擇器不工作？

回答

相關問題