通过与第二列进行比较来更改第二列的颜色

Question

enter image description here

如果列中的数字发生变化，则其颜色也应发生变化。 有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>

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