0

我正在使用 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 和 anotherTd 将在第二行。

我想要它，以便 .row0 .column0 中的 td 默认具有红色背景色。这很奇怪，因为$('.row0').not('.column0').on({不选择 td 和.row0 .column0, 并.row0选择它 . column0选择它，所以它的类 For Sure is.row0 .column0但是，当我去 CSS 并做

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

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

$('.row0 .column0')

它仍然没有选择任何东西。怎么来的？

4

2 回答 2

2

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

.row0.column0column0 选择具有类和 的元素row0。

于 2013-10-28T19:36:09.637 回答
0

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

<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-28T20:05:58.923 回答