如果列中的数字发生变化,则其颜色也应发生变化。 有7列。
比较第一列和第二列。如果数字更改了,它的颜色也会改变。
第一行中的示例“ 134”,“ 139”,然后应更改“ 139”值的颜色。 在第二行中重复“ 4”和“ 4”,则其颜色不应更改。
<table style="width:80%" id="customers" align="center">
<tr>
<th style="background-color:white;" colspan="2"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Here" title="Type in a name"></th>
<th colspan="7"> asfdasdf</th>
</tr>
<tr>
<th colspan="2"><select class="ui dropdown" id="myselection">
<option value="One">Readvon</option>
<option value="Two">sdctry</option>
<option value="Three">scv</option>
<option value="four">sdv</option>
</select></th>
<th>Nov_2013</th>
<th>March_2014</th>
<th>Dec_2015</th>
<th>Nov_2017</th>
<th>April_2018</th>
<th>Feb_2019</th>
<th>April_2019</th>
</tr>
</table>
<div id="showOne">
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</div>
</table>
答案 0 :(得分:1)
您必须执行以下操作。了解有关HTMLTableElement的信息。您必须先访问行,然后再访问列。比较各栏中的文字...
var table = document.getElementsByTagName('table');
var rows = table[0].rows
var rowsLength = rows.length;
var columns;
var columnsLength;
for (var i = 0; i < rowsLength; i++) {
columns = rows[i].cells;
columnsLength = columns.length;
// We don't need first column, as it contains the text
for (var j = 1; j < columnsLength - 1; j++) {
if (parseInt(columns[j].innerText) != parseInt(columns[j + 1].innerText)) {
columns[j + 1].style.color = 'green';
}
}
}
<table style="width:80%" id="customers" align="center">
<tr>
<td colspan='2' style='color:red'>Total</td>
<td>134</td>
<td>139</td>
<td>137</td>
<td>158</td>
<td>144</td>
<td>146</td>
<td>140</td>
</tr>
<tr>
<td colspan='2'>Aadc</td>
<td>0</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td colspan='2'>Asdvacific</td>
<td>48</td>
<td>45</td>
<td>33</td>
<td>36</td>
<td>33</td>
<td>34</td>
<td>33</td>
</tr>
<tr>
<td colspan='2'>Eafcdpe</td>
<td>45</td>
<td>42</td>
<td>46</td>
<td>53</td>
<td>48</td>
<td>52</td>
<td>50</td>
</tr>
<tr>
<td colspan='2'>Inasdca</td>
<td>0</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td colspan='2'>MsCDNA</td>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td colspan='2'>NortScerica</td>
<td>37</td>
<td>38</td>
<td>44</td>
<td>49</td>
<td>48</td>
<td>41</td>
<td>40</td>
</tr>
<tr>
<td colspan='2'>SouacAmerica</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
</table>