如何在选择时突出显示/着色多行？答案

【问题标题】：How to highlight/color multiple rows on selection?如何在选择时突出显示/着色多行？
【发布时间】：2014-11-09 11:18:24
【问题描述】：

这是指我之前的问题。

How to change row color on selecting rows?

这次我有一个表，其中每一行的第一列（值）是数字，如下所示

<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 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>

在文本框中选择开始和停止值时，值将被传递给表格，表格将仅对第一列/值位于开始和停止范围内的行着色。我们如何实现这一点？请在这件事上帮助我。

【问题讨论】：

有什么问题？获取所有表格行并遍历它们以查看哪些应该被着色。
我的表很长，有将近 500 亿个条目，所以不想滚动它。有没有其他方法可以做到。
我非常怀疑您是否在 HTML 中同时向用户显示 500 亿个条目。
不，我不显示，但输入数据有这么多条目。
所以对当前显示的元素使用前一种方法。

标签： javascript colors html-table

【解决方案1】：

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/

【讨论】：