突出顯示錶行不起作用

我有一個HTML表格，如http://jsfiddle.net/Lijo/Hb28u/4/中給出的jQuery腳本。有四種突出顯示錶格行的jQuery方法。最後兩種方法不起作用，他們爲什麼不工作？我正在尋找簡單英語的解釋。突出顯示錶行不起作用

HTML

<table id="table1"> 
<tr> <td>N</td><td>Y</td></tr> 
<tr class="y_n"><td>Q</td><td>N</td></tr> 
</table> 

<br/><br/> 

<table id="table2"> 
<tr> <td>N</td><td>Y</td></tr> 
<tr class="y_n"><td>Q</td><td>N</td></tr> 
</table> 

<br/><br/> 

<table id="table3"> 
<tr> <td>N</td><td>Y</td></tr> 
<tr class="y_n"><td>Q</td><td>N</td></tr> 
</table> 

<br/><br/> 

<table id="table4"> 
<tr> <td>N</td><td>Y</td></tr> 
<tr class="y_n"><td>Q</td><td>N</td></tr> 
</table> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js">

SCRIPT

$(document).ready(function() 
{ 


//Apporach 1 - Highlight First Row 

$('#table1 tr td:eq(0)').each(function() { 
if ($(this).text() == 'N') { 
    $(this).parent().css('background-color', 'Orange'); 
} 
}); 


//Apporach 2 - - Highlight Second Row 

$('#table2 tr td:gt(0)').each(function() { 
if ($(this).text() == 'N') { 
    $(this).parent().css('background-color', 'Orange'); 
} 
}); 


//Apporach 3 - Highlight Second Row 

$('#table3 tr td:eq(1)').each(function() { 
if ($(this).text() == 'N') { 
    $(this).parent().css('background-color', 'Orange'); 
} 
}); 


//Apporach 4 Highlight All Rows 

$('#table4 tr td)').each(function() { 
if ($(this).text() == 'N') { 
    $(this).parent().css('background-color', 'Orange'); 
} 
}); 

});

來源

2012-09-19 Lijo

嘗試'backgroundColor' ... – Night2

方法4： '＃表4 TR TD）' 是 '＃表4 TR TD' – Prasanna

現在，它的工作原理jsfiddle

$('#table3 tr td:eq(3)').each(function() { // note that you search for td no. 3 and not 1 
    if ($(this).text() == 'N') { 
     $(this).parent().css('background-color', 'Orange'); 
    } 
}); 


//Apporach 4 Highlight All Rows 
$('#table4 tr td').each(function() { // note that in your example you have a) at the end of the selector 
    if ($(this).text() == 'N') { 
     $(this).parent().css('background-color', 'Orange'); 
    } 
});

來源

2012-09-19 10:30:10

這意味着td有連續編號？ – Lijo

選擇器'＃table3 tr td'返回一個數組，其中所有的tds都在選定的tr內，因此每個td都有它自己的索引，它的搜索順序爲 –

感謝您的解釋。我覺得這是一個性能問題。我將在RowDataBound事件中爲ASP.Net GridView中的所需行添加一個CSS類。並選擇基於css類的行.. $（＃myTable tr.myclass'）http://stackoverflow.com/questions/2390200/how-do-i-specify-css-classes-for-specific-rows-in- A-GridView控件 – Lijo

//Apporach 3 - Highlight Second Row 
$('#table3 tr:eq(1) td').each(function() { //second row 
if ($(this).text() == 'N') { 
    $(this).parent().css('background-color', 'Orange'); 
} 
}); 


    //Apporach 4 Highlight All Rows 
    $('#table4 tr td').each(function() { //here you had a unnescessary ')' 
    if ($(this).text() == 'N') { 
     $(this).css('background-color', 'Orange'); 
    } 
    });

希望你得到它:)

來源

2012-09-19 10:30:07 coolguy

號，你提到的方法3是一樣的方法1，方法3不完成它的任務 - 參見http://jsfiddle.net/Lijo/Hb28u/12/ – Lijo

@Lijo更新了我的答案..現在檢查 – coolguy

突出顯示錶行不起作用

回答

相關問題