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

I have following snippet:

我有下面的代码片段:

 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);
 }

I am unable to change background color of a TD. My table looks like this

我无法改变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>

3 个解决方案

#1

Try Replacing this

尝试更换这个

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

with this

用这个

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

#2

Using closest your are:

使用最亲密的你:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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

but the aren't any elements up in the DOM with that selector; you are seaching a child element so use find:

但是DOM中没有任何元素有这个选择器;您正在使用一个子元素，因此使用find:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

获取当前匹配元素集合中的每个元素的后代，这些元素由选择器、jQuery对象或元素进行筛选。

Code:

代码:

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

Demo: http://jsfiddle.net/IrvinDominin/YE5nr/

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

#3

Try this:

试试这个:

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

#1