I need to "massage" a HTML table.
On the page there is a dropdown:
<SELECT CLASS='slctor' size='1' NAME='KEYVAL' ID='KEYVAL' >
<OPTION VALUE='{*}'>*
</OPTION>
<OPTION value='10'>green
</OPTION>
<OPTION value='20'>green
</OPTION>
<OPTION value='30'>green
</OPTION>
<OPTION value='40'>yellow
</OPTION>
<OPTION value='90'>red
</OPTION>
</SELECT>
I also have a table with Person/year and a value for each pair:
<table>
<tr>
<td></td>
<td>2001</td>
<td>2002</td>
<td>2003</td>
</tr>
<tr>
<td>JOE</td>
<td>10</td>
<td>30</td>
<td>90</td>
</tr><tr>
<td>BETTY</td>
<td>20</td>
<td>20</td>
<td>40</td>
</tr>
</table>
I want to use jQuery to "resolve" each cell value from the dropdowns value, return the label, and replace the cell content (or the background color).
I am able to do the basics, as in the actual DOM manipulation, but I need help actually doing the lookup in a efficient manner.
Try this:
$(".slctor").change(function(){
var selectedVal=$(this).val();
$('table').find('td').filter(function(){return $(this).text() ==selectedVal}).css("background-color","red");
//or
$('table').find('td').filter(function(){return $(this).text() ==selectedVal}).text("New Text");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.