Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

highlight chosen table cells

Status
Not open for further replies.
plectrum

plectrum

Programmer
Feb 16, 2004
21
0
0
US
Hi,
Please help.
What I want to do is:
I have a big table, each cell has a different number in it, and I have a separate number selector, when I select, say, "100", all the cells with the number > 100 will be highlighted with different color. Is there an easy way to do this without re-drawing the table?


Thanks in advance
 
Sort by date Sort by votes

This should do what you're after:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function highlightNumbers(thresholdNum) {
			var myTableRows = document.getElementById('myTable').rows;
			for (var rowLoop=0; rowLoop < myTableRows.length; rowLoop++) {
				var currentRow = myTableRows[rowLoop].cells;
				for (var cellLoop=0; cellLoop < currentRow.length; cellLoop++) {
					var cellContents = currentRow[cellLoop].innerText;
					if (cellContents >= thresholdNum) {
						currentRow[cellLoop].style.backgroundColor = '#FFFF00';
					} else {
						currentRow[cellLoop].style.backgroundColor = '#FFFFFF';
					}
				}
			}
		}
	//-->
	</script>
</head>
<body>
	Click <a href="javascript:highlightNumbers(20);">here</a> to highlight all cells where the number is bigger than 20<br />
	Click <a href="javascript:highlightNumbers(50);">here</a> to highlight all cells where the number is bigger than 50<br />
	Click <a href="javascript:highlightNumbers(100);">here</a> to highlight all cells where the number is bigger than 100<br />
	<table id="myTable" border="1">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>10</td>
			<td>20</td>
			<td>30</td>
			<td>40</td>
			<td>50</td>
		</tr>
		<tr>
			<td>75</td>
			<td>76</td>
			<td>77</td>
			<td>78</td>
			<td>79</td>
		</tr>
		<tr>
			<td>80</td>
			<td>82</td>
			<td>84</td>
			<td>86</td>
			<td>88</td>
		</tr>
		<tr>
			<td>90</td>
			<td>100</td>
			<td>110</td>
			<td>120</td>
			<td>150</td>
		</tr>
	</table>
</body>
</html>

Hope this helps,
Dan
 
Upvote 0 Downvote
Actually - scrap that... I forgot to add the parseInt command, so it didn't always work. This is a better version, and gives you the dropdown you require (I assume that's what you meant by "number selector"):

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function highlightNumbers(thresholdNum) {
			thresholdNum = parseInt(thresholdNum, 10);
			var myTableRows = document.getElementById('myTable').rows;
			for (var rowLoop=0; rowLoop < myTableRows.length; rowLoop++) {
				var currentRow = myTableRows[rowLoop].cells;
				for (var cellLoop=0; cellLoop < currentRow.length; cellLoop++) {
					var cellContents = parseInt(currentRow[cellLoop].innerText, 10);
					if (parseInt(cellContents, 10) >= thresholdNum) {
						currentRow[cellLoop].style.backgroundColor = '#FFFF00';
					} else {
						currentRow[cellLoop].style.backgroundColor = '#FFFFFF';
					}
				}
			}
		}
	//-->
	</script>
</head>
<body>
	<form>
		<select onchange="highlightNumbers(this.value);">
			<option value="5">5</option>
			<option value="10">10</option>
			<option value="25">25</option>
			<option value="50">50</option>
			<option value="100">100</option>
			<option value="125">125</option>
		</select>
	</form>
	<table id="myTable" border="1">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<td>10</td>
			<td>20</td>
			<td>30</td>
			<td>40</td>
			<td>50</td>
		</tr>
		<tr>
			<td>75</td>
			<td>76</td>
			<td>77</td>
			<td>78</td>
			<td>79</td>
		</tr>
		<tr>
			<td>80</td>
			<td>82</td>
			<td>84</td>
			<td>86</td>
			<td>88</td>
		</tr>
		<tr>
			<td>90</td>
			<td>100</td>
			<td>110</td>
			<td>120</td>
			<td>150</td>
		</tr>
	</table>
</body>
</html>

Hope this helps,
Dan


 
Upvote 0 Downvote
plectrum,

if you want to be able to click on the table, just take Dan's code and add change each TD-tag to:

Code: 
<td onclick='highlightNumbers(this.innerText);'>84</td>

Then all numbers are eligible, not just the ones in the drop-down.

--Dave

P.S., cool code Dan!
 
Upvote 0 Downvote
Dan, thanks for the help, it is what I need. But, this seems only work for IE, not for netscape or mozilla.Maybe they don't support "cells" and "rows" properties?

plectrum
 
Upvote 0 Downvote
How would you need to modify this to work on a range instead of a start point (IE ip's 10.9.8.7 - 10.9.8.36) using the td onclick or the drop down box(s) to set the range?

Code: 
<html>
<head>
    <script type="text/javascript">
    <!--
        function highlightNumbers(thresholdNum) {
            thresholdNum = parseInt(thresholdNum, 10);
            var myTableRows = document.getElementById('myTable').rows;
            for (var rowLoop=0; rowLoop < myTableRows.length; rowLoop++) {
                var currentRow = myTableRows[rowLoop].cells;
                for (var cellLoop=0; cellLoop < currentRow.length; cellLoop++) {
                    var cellContents = parseInt(currentRow[cellLoop].innerText, 10);
                    if (parseInt(cellContents, 10) >= thresholdNum) {
                        currentRow[cellLoop].style.backgroundColor = '#FFFF00';
                    } else {
                        currentRow[cellLoop].style.backgroundColor = '#FFFFFF';
                    }
                }
            }
        }
    //-->
    </script>
</head>
<body>
    <form>
        <select onchange="highlightNumbers(this.value);">
            <option value="10.9.8.1">10.9.8.1</option>
            <option value="10.9.8.2">10.9.8.2</option>
            <option value="10.9.8.3">10.9.8.3</option>
            <option value="10.9.8.4">10.9.8.4</option>
            <option value="10.9.8.5">10.9.8.5</option>
            <option value="10.9.8.6">10.9.8.6</option>
            <option value="10.9.8.7">10.9.8.7</option>
            <option value="10.9.8.8">10.9.8.8</option>
            <option value="10.9.8.9">10.9.8.9</option>
            <option value="10.9.8.10">10.9.8.10</option>
            <option value="10.9.8.11">10.9.8.11</option>
            <option value="10.9.8.12">10.9.8.12</option>
            <option value="10.9.8.13">10.9.8.13</option>
            <option value="10.9.8.14">10.9.8.14</option>
            <option value="10.9.8.15">10.9.8.15</option>
            <option value="10.9.8.16">10.9.8.16</option>
            <option value="10.9.8.17">10.9.8.17</option>
            <option value="10.9.8.18">10.9.8.18</option>
            <option value="10.9.8.19">10.9.8.19</option>
            <option value="10.9.8.20">10.9.8.20</option>
            <option value="10.9.8.21">10.9.8.21</option>
            <option value="10.9.8.22">10.9.8.22</option>
            <option value="10.9.8.23">10.9.8.23</option>
            <option value="10.9.8.24">10.9.8.24</option>
            <option value="10.9.8.25">10.9.8.25</option>
            <option value="10.9.8.26">10.9.8.26</option>
            <option value="10.9.8.27">10.9.8.27</option>
            <option value="10.9.8.28">10.9.8.28</option>
            <option value="10.9.8.29">10.9.8.29</option>
            <option value="10.9.8.30">10.9.8.30</option>
            <option value="10.9.8.31">10.9.8.31</option>
            <option value="10.9.8.32">10.9.8.32</option>
            <option value="10.9.8.33">10.9.8.33</option>
            <option value="10.9.8.34">10.9.8.34</option>
            <option value="10.9.8.35">10.9.8.35</option>
            <option value="10.9.8.36">10.9.8.36</option>
            <option value="10.9.8.37">10.9.8.37</option>
            <option value="10.9.8.38">10.9.8.38</option>
            <option value="10.9.8.39">10.9.8.39</option>
            <option value="10.9.8.40">10.9.8.40</option>
            <option value="10.9.8.41">10.9.8.41</option>
            <option value="10.9.8.42">10.9.8.42</option>
            <option value="10.9.8.43">10.9.8.43</option>
            <option value="10.9.8.44">10.9.8.44</option>
            <option value="10.9.8.45">10.9.8.45</option>
            <option value="10.9.8.46">10.9.8.46</option>
            <option value="10.9.8.47">10.9.8.47</option>
            <option value="10.9.8.48">10.9.8.48</option>
            <option value="10.9.8.49">10.9.8.49</option>
            <option value="10.9.8.50">10.9.8.50</option>
            <option value="10.9.8.51">10.9.8.51</option>
            <option value="10.9.8.52">10.9.8.52</option>
            <option value="10.9.8.53">10.9.8.53</option>
            <option value="10.9.8.54">10.9.8.54</option>
            <option value="10.9.8.55">10.9.8.55</option>
            <option value="10.9.8.56">10.9.8.56</option>
            <option value="10.9.8.57">10.9.8.57</option>
            <option value="10.9.8.58">10.9.8.58</option>
            <option value="10.9.8.59">10.9.8.59</option>
            <option value="10.9.8.60">10.9.8.60</option>
            <option value="10.9.8.61">10.9.8.61</option>
            <option value="10.9.8.62">10.9.8.62</option>
            <option value="10.9.8.63">10.9.8.63</option>
            <option value="10.9.8.64">10.9.8.64</option>
            <option value="10.9.8.65">10.9.8.65</option>
            <option value="10.9.8.66">10.9.8.66</option>
            <option value="10.9.8.67">10.9.8.67</option>
            <option value="10.9.8.68">10.9.8.68</option>
            <option value="10.9.8.69">10.9.8.69</option>
            <option value="10.9.8.70">10.9.8.70</option>
        </select>
        <select onchange="highlightNumbers(this.value);">
            <option value="10.9.8.1">10.9.8.1</option>
            <option value="10.9.8.2">10.9.8.2</option>
            <option value="10.9.8.3">10.9.8.3</option>
            <option value="10.9.8.4">10.9.8.4</option>
            <option value="10.9.8.5">10.9.8.5</option>
            <option value="10.9.8.6">10.9.8.6</option>
            <option value="10.9.8.7">10.9.8.7</option>
            <option value="10.9.8.8">10.9.8.8</option>
            <option value="10.9.8.9">10.9.8.9</option>
            <option value="10.9.8.10">10.9.8.10</option>
            <option value="10.9.8.11">10.9.8.11</option>
            <option value="10.9.8.12">10.9.8.12</option>
            <option value="10.9.8.13">10.9.8.13</option>
            <option value="10.9.8.14">10.9.8.14</option>
            <option value="10.9.8.15">10.9.8.15</option>
            <option value="10.9.8.16">10.9.8.16</option>
            <option value="10.9.8.17">10.9.8.17</option>
            <option value="10.9.8.18">10.9.8.18</option>
            <option value="10.9.8.19">10.9.8.19</option>
            <option value="10.9.8.20">10.9.8.20</option>
            <option value="10.9.8.21">10.9.8.21</option>
            <option value="10.9.8.22">10.9.8.22</option>
            <option value="10.9.8.23">10.9.8.23</option>
            <option value="10.9.8.24">10.9.8.24</option>
            <option value="10.9.8.25">10.9.8.25</option>
            <option value="10.9.8.26">10.9.8.26</option>
            <option value="10.9.8.27">10.9.8.27</option>
            <option value="10.9.8.28">10.9.8.28</option>
            <option value="10.9.8.29">10.9.8.29</option>
            <option value="10.9.8.30">10.9.8.30</option>
            <option value="10.9.8.31">10.9.8.31</option>
            <option value="10.9.8.32">10.9.8.32</option>
            <option value="10.9.8.33">10.9.8.33</option>
            <option value="10.9.8.34">10.9.8.34</option>
            <option value="10.9.8.35">10.9.8.35</option>
            <option value="10.9.8.36">10.9.8.36</option>
            <option value="10.9.8.37">10.9.8.37</option>
            <option value="10.9.8.38">10.9.8.38</option>
            <option value="10.9.8.39">10.9.8.39</option>
            <option value="10.9.8.40">10.9.8.40</option>
            <option value="10.9.8.41">10.9.8.41</option>
            <option value="10.9.8.42">10.9.8.42</option>
            <option value="10.9.8.43">10.9.8.43</option>
            <option value="10.9.8.44">10.9.8.44</option>
            <option value="10.9.8.45">10.9.8.45</option>
            <option value="10.9.8.46">10.9.8.46</option>
            <option value="10.9.8.47">10.9.8.47</option>
            <option value="10.9.8.48">10.9.8.48</option>
            <option value="10.9.8.49">10.9.8.49</option>
            <option value="10.9.8.50">10.9.8.50</option>
            <option value="10.9.8.51">10.9.8.51</option>
            <option value="10.9.8.52">10.9.8.52</option>
            <option value="10.9.8.53">10.9.8.53</option>
            <option value="10.9.8.54">10.9.8.54</option>
            <option value="10.9.8.55">10.9.8.55</option>
            <option value="10.9.8.56">10.9.8.56</option>
            <option value="10.9.8.57">10.9.8.57</option>
            <option value="10.9.8.58">10.9.8.58</option>
            <option value="10.9.8.59">10.9.8.59</option>
            <option value="10.9.8.60">10.9.8.60</option>
            <option value="10.9.8.61">10.9.8.61</option>
            <option value="10.9.8.62">10.9.8.62</option>
            <option value="10.9.8.63">10.9.8.63</option>
            <option value="10.9.8.64">10.9.8.64</option>
            <option value="10.9.8.65">10.9.8.65</option>
            <option value="10.9.8.66">10.9.8.66</option>
            <option value="10.9.8.67">10.9.8.67</option>
            <option value="10.9.8.68">10.9.8.68</option>
            <option value="10.9.8.69">10.9.8.69</option>
            <option value="10.9.8.70">10.9.8.70</option>
        </select>
    </form>
    <table id="myTable" border="1">
  <col width="77" style="mso-width-source:userset;mso-width-alt:2730;width:58pt">
  <tr height="18" style="height:13.2pt">
    <td height="18" width="77" style="height:13.2pt;width:58pt"><font size="1">10.9.8.1</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.2</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.3</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.4</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.5</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.6</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.7</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.8</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.9</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.10</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.11</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.12</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.13</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.14</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.15</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.16</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.17</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.18</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.19</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.20</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.21</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.22</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.23</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.24</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.25</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.26</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.27</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.28</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.29</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.30</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.31</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.32</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.33</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.34</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.35</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.36</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.37</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.38</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.39</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.40</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.41</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.42</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.43</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.44</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.45</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.46</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.47</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.48</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.49</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.50</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.51</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.52</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.53</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.54</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.55</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.56</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.57</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.58</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.59</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.60</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.61</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.62</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.63</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.64</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.65</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.66</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.67</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.68</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.69</font></td>
  </tr>
  <tr height="18" style="height:13.2pt">
    <td height="18" style="height:13.2pt"><font size="1">10.9.8.70</font></td>
  </tr>
</table>

</body>

</html>


Thanks, Danzig
 
Upvote 0 Downvote
Basically, you have to assign a numerical value to 10.9.8.3 (for example). The best value (I think) would be (in this case) 10009008003. Notice what I did in the code below (P.S., with the two drop-down system like you have, there is no need to send a parameter to the function. Also, notice I named the SELECT lists 'lower' and 'upper' (although I only show the JavaScript here) and I allow for 'lower' to be higher than 'upper').

Code: 
    <script type="text/javascript">
    <!--
        function highlightNumbers([s]thresholdNum[/s]) {
[b]//[/b]            thresholdNum = parseInt(thresholdNum, 10);
[b]
 var thresholdNum = document.forms[0].lower.value;
 var ip1 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 var ip2 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 var ip3 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 var ip4 = thresholdNum;

 var lower = (parseInt(ip1, 10) * 1000000000) + 
  (parseInt(ip2, 10) * 1000000) +
  (parseInt(ip3, 10) * 1000) + 
  parseInt(ip4, 10);

 thresholdNum = document.forms[0].upper.value;
 ip1 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip2 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip3 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip4 = thresholdNum;

 var upper = (parseInt(ip1, 10) * 1000000000) + 
 (parseInt(ip2, 10) * 1000000) +
 (parseInt(ip3, 10) * 1000) + 
 parseInt(ip4, 10);
[/b]
            var myTableRows = document.getElementById('myTable').rows;
            for (var rowLoop=0; rowLoop < myTableRows.length; rowLoop++) {
                var currentRow = myTableRows[rowLoop].cells;
                for (var cellLoop=0; cellLoop < currentRow.length; cellLoop++) {
[b]
 thresholdNum = currentRow[cellLoop].innerText;
 ip1 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip2 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip3 = thresholdNum.substring(0,thresholdNum.indexOf('.'));
 thresholdNum = thresholdNum.substring(thresholdNum.indexOf('.')+1);
 ip4 = thresholdNum;

  var curr = (parseInt(ip1, 10) * 1000000000) + 
   (parseInt(ip2, 10) * 1000000) +
   (parseInt(ip3, 10) * 1000) + 
   parseInt(ip4, 10);

  if ((curr >= lower && curr <= upper) || (curr <= lower && curr >= upper))[/b] {
                        currentRow[cellLoop].style.backgroundColor = '#FFFF00';
                    } else {
                        currentRow[cellLoop].style.backgroundColor = '#FFFFFF';
                    }
                }
            }
        }
    //-->
    </script>

'works for me in IE6. I've had issues with ip-addresses before and I was able to sort them by doing this (converting them into equivalently-relative numbers).

Let me know if that works for you.

--Dave
 
Upvote 0 Downvote
Danzig, i agree with looking for info, but in an easier update, considering that list is probably script generated, is update the <TD>'s with a name or an id value, and numeric would work just dandy, then just search for elementId's instead of values between tags, nice part with this is, you're already handling the tag "object" and you can easily .style.background it at that point.

[thumbsup2]DreX
aKa - Robert
 
Upvote 0 Downvote

plectrum,

I found the cross-browser issue with my code.

If you change this line:

Code: 
var cellContents = parseInt(currentRow[cellLoop].innerText, 10);

to this:

Code: 
var cellContents = parseInt(currentRow[cellLoop].firstChild.nodeValue, 10);

then it magically becomes cross-browser ;o)

Hope this helps,
Dan
 
Upvote 0 Downvote
Dan,

Thanks a lot. I also realized that Mozilla and Netscape don't support innerText but only innerHTML, so replacing innerText with innerHTML will work fine.
 
Upvote 0 Downvote
var pagedata=document.getElementsByTagName("TD")

then looping thru the collection and checking the innerHTML or innerText or checking the item's ID value, any which way about it, and is cross browser happy as well.

there's also getElementsByWhatever() that you could use as well, including the whatever value being your restriction of value in innerHTML or innerText

and Whatever isn't a switchout word, it's the actual command, it allows for some pretty variant selection.

[thumbsup2]DreX
aKa - Robert
 
Upvote 0 Downvote
Now I have more than few thousands rows in my table, to execute this script really took a while. Is there a way to highlight the cells while it's executing so that the user can visually see something is going on instead of wondering something wrong while waiting? Thanks

 
Upvote 0 Downvote
You'd have to break the function down and use setTimeout or setInterval to call another function that highlights either a row or a cell at a time.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
251
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
256
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
221
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
72
TheLazyPig
TheLazyPig
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
98
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top