如何突出显示/颜色多行选择? [英] How to highlight/color multiple rows on selection?
问题描述
这是指我上一个问题。
This refers to my previous question.
How to change row color on selecting rows?
这次我有一个表,其中每一行的第一列(值)是数字,如下所示
This time i have one table where first column(value) in each row is numeric as follows
<table border=1>
<tr id="id1">
<td>3</td>
<td>row12</td>
<td>row13</td>
</tr>
<tr id="id2">
<td>12</td>
<td>row22</td>
<td>row23</td>
</tr>
<tr id="id3">
<td>15</td>
<td>row32</td>
<td>row33</td>
</tr>
<tr id="id4">
<td>22</td>
<td>row42</td>
<td>row43</td>
</tr>
<tr id="id5">
<td>23</td>
<td>row52</td>
<td>row53</td>
</tr>
<tr id="id6">
<td>55</td>
<td>row62</td>
<td>row63</td>
</tr>
</table>
用于选择开始和结束值的表单。
Form for selecting start and stop values.
<form name="rcol" onsubmit="return false">
Start value: <input type="value" name="start"><br>
End value: <input type="value" name="stop"><br>
<input type="submit" value="Submit">
</form>
在文本框中选择开始和结束值时,值将传递到表和表,那些第一列/值位于开始和停止范围内的行。我们如何实现这一点? Pls帮助我在这件事。
On selecting start and stop values in the textbox, values will be passed to table and table will color only those rows whose first column/value lies in the start and stop range. How can we implement this? Pls help me in this matter.
推荐答案
Javascript:
Javascript:
function colorize() {
start_val = parseInt(document.getElementById('start').value);
stop_val = parseInt(document.getElementById('stop').value);
rows = document.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
td = rows[i].getElementsByTagName("td")[0];
values = td.innerHTML;
if (values >= start_val && values <= stop_val) {
td.parentNode.style.backgroundColor = 'red';
} else {
td.parentNode.style.backgroundColor = 'white';
}
}
}
document.getElementById("sub").addEventListener("click", colorize);
HTML:
<form name="rcol" onsubmit="return false">
Start value: <input type="value" name="start" id="start"><br>
End value: <input type="value" name="stop" id="stop"><br>
<input type="submit" value="Submit" id="sub">
</form>
所以,基本上,循环通过tr标签,找到第一个子数值,值,这就是它。
演示: http://jsfiddle.net/84932q9g/
So, basically, loop through tr tags, find first child numeric value, compare it with start and stop values, and that's it. DEMO: http://jsfiddle.net/84932q9g/
这篇关于如何突出显示/颜色多行选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!