Question

我有以下代码段：

 function drawVisualization2(dataArray, divName) {
     var dataTbl = google.visualization.arrayToDataTable(dataArray);
     var table1 = new google.visualization.ChartWrapper({
         'chartType': 'Table',
         'containerId': 'chart3',
         dataTable: dataTbl,
         'options': {
             'width': '500px'
         }
     });
     table1.draw();

     function tableCleanUp() {
         google.visualization.events.addListener(table1.getChart(), 'sort', tableCleanUp2);
         tableCleanUp2();
     }

     function tableCleanUp2() {
         $('#chart3 .google-visualization-table-tr-odd, #chart3 .google-visualization-table-tr-even').each(function (e) {
             $(this).closest('td:nth-child(1)').css("background-color", "red");
         });
     }
     google.visualization.events.addListener(table1, 'ready', tableCleanUp);
 }

我无法更改TD的背景颜色。我的表看起来像这样

<div id="chart3" style="position: relative;">
    <div style="position: relative;">
        <div style="position: relative; overflow: auto; width: 500px;">
            <table class="google-visualization-table-table" cellspacing="0">
                <tbody>
                    <tr class="google-visualization-table-tr-head">
                    <tr class="google-visualization-table-tr-even">
                    <tr class="google-visualization-table-tr-odd">
                        <td class="google-visualization-table-td">SPINAL FUSION EXCEPT CERVICAL W/O MCC</td>
                        <td class="google-visualization-table-td">1804860128.00</td>
                        <td class="google-visualization-table-td">6130083182.00</td>
                        <td class="google-visualization-table-td">70.56</td>
                        <td class="google-visualization-table-td">29.44</td>
                    </tr>
                    <tr class="google-visualization-table-tr-even">
                    <tr class="google-visualization-table-tr-odd">
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

尝试替换此

 $(this).closest('td:nth-child(1)').css("background-color", "red");

用这个

$(this).find('td:nth-child(1)').css("background-color", "red");

Answer 2

使用closest你的：

对于集合中的每个元素，获取与之匹配的第一个元素选择器通过测试元素本身并遍历其中 DOM树中的祖先。

但是DOM中没有带有该选择器的任何元素;您正在搜索子元素，因此请使用find：

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

代码：

$(this).find('td:nth-child(1)').css("background-color", "red");

演示：http://jsfiddle.net/IrvinDominin/YE5nr/

Answer 3

试试这个：

 $('#chart3 .google-visualization-table-tr-odd > td:first-child, 
  #chart3 .google-visualization-table-tr-even > td:first-child')
 .css('background-color', 'red');

无法使用jQuery更改TD背景颜色

3 个答案: