如何用for循环中的变量替换索引？

Question

我想使遥测数据表的颜色取决于表中的值。在此平台中，它们为索引提供指向遥测数据的索引，例如“ $ {＃0}”（0是数据数量）。然后，我仅创建表并将其放在表中以显示遥测数据。但是我需要每个值更改的背景色，例如，当值为“ 0”时，该值的背景变为橙色。当值为“ 1”时，背景=绿色。最简单的方法是为表中的每个值写入if-else条件。但是我的代码将包含太多字符。我想使用for循环或while循环来循环检查表中的值，并且我需要循环中的值来替换指向每个遥测数据的索引号（以检查表中的每个值并更改背景颜色），但是当我将for循环中的值放入索引。没用没事任何人都可以帮助解决该问题？谢谢：）

<div class="divTable minimalistBlack">
    <div class="divTableHeading">
        <div class="divTableRow"> <!--Header-->
            <div class="divTableHead">STATION</div>
            <div class="divTableHead">ENTITY TYPE</div>
            <div class="divTableHead">ATS</div>
            <div class="divTableHead">FAULT</div>
            <div class="divTableHead">FEEDER1</div>
            <div class="divTableHead">SW1</div>
            <div class="divTableHead">FEEDER2</div>
            <div class="divTableHead">SW2</div>
            <div class="divTableHead">ACTIVE STATUS</div>
        </div>
    </div>
    <div class="divTableBody">
        <div class="divTableRow"> <!--Row 1-->
            <div class="divTableCell">Station 1</div>
            <div class="divTableCell">DEVICE</div>
            <div id="0" div class="divTableCell">${#0}</div>
            <div id="1" div class="divTableCell">${#1}</div>
            <div id="2" div class="divTableCell">${#2}</div>
            <div id="3" div class="divTableCell">${#3}</div>
            <div id="4" div class="divTableCell">${#4}</div>
            <div id="5" div class="divTableCell">${#5}</div>
            <div id="6" div class="divTableCell">${#6}</div>
        </div>
        <div class="divTableRow"> <!--Row 2-->
            <div class="divTableCell">Station 2</div>
            <div class="divTableCell">DEVICE</div>
            <div id="7" div class="divTableCell">${#7}</div>
            <div id="8" div class="divTableCell">${#8}</div>
            <div id="9" div class="divTableCell">${#9}</div>
            <div id="10" div class="divTableCell">${#10}</div>
            <div id="11" div class="divTableCell">${#11}</div>
            <div id="12" div class="divTableCell">${#12}</div>
            <div id="13" div class="divTableCell">${#13}</div>
        </div>
        <div class="divTableRow"> <!--Row 3-->
            <div class="divTableCell">Station 3</div>
            <div class="divTableCell">DEVICE</div>
            <div id="14" div class="divTableCell">${#14}</div>
            <div id="15" div class="divTableCell">${#15}</div>
            <div id="16" div class="divTableCell">${#16}</div>
            <div id="17" div class="divTableCell">${#17}</div>
            <div id="28" div class="divTableCell">${#18}</div>
            <div id="19" div class="divTableCell">${#19}</div>
            <div id="20" div class="divTableCell">${#20}</div>
        </div>
        <div class="divTableRow"> <!--Row 4-->
            <div class="divTableCell">Station 4</div>
            <div class="divTableCell">DEVICE</div>
            <div id="21" div class="divTableCell">${#21}</div>
            <div id="22" div class="divTableCell">${#22}</div>
            <div id="23" div class="divTableCell">${#23}</div>
            <div id="24" div class="divTableCell">${#24}</div>
            <div id="25" div class="divTableCell">${#25}</div>
            <div id="26" div class="divTableCell">${#26}</div>
            <div id="27" div class="divTableCell">${#27}</div>
        </div>
        <div class="divTableRow"> <!--Row 5-->
            <div class="divTableCell">Station 5</div>
            <div class="divTableCell">DEVICE</div>
            <div id="28" div class="divTableCell">${#28}</div>
            <div id="29" div class="divTableCell">${#29}</div>
            <div id="30" div class="divTableCell">${#30}</div>
            <div id="31" div class="divTableCell">${#31}</div>
            <div id="32" div class="divTableCell">${#32}</div>
            <div id="33" div class="divTableCell">${#33}</div>
            <div id="34" div class="divTableCell">${#34}</div>
        </div>
        <div class="divTableRow"> <!--Row 6-->
            <div class="divTableCell">Station 6</div>
            <div class="divTableCell">DEVICE</div>
            <div id="35" div class="divTableCell">${#35}</div>
            <div id="36" div class="divTableCell">${#36}</div>
            <div id="37" div class="divTableCell">${#37}</div>
            <div id="38" div class="divTableCell">${#38}</div>
            <div id="39" div class="divTableCell">${#39}</div>
            <div id="40" div class="divTableCell">${#40}</div>
            <div id="41" div class="divTableCell">${#41}</div>
        </div>
        <script>
                (function () {
                    int  i = 0;
                    while(i<42){
                    if (${#i} == 0) {
                        document.getElementById(i).style.backgroundColor = '#F8D347';
                        }
                    else if (${#i} == 1){
                        document.getElementById(i).style.backgroundColor = '#99C262';
                            }
                        i++;
                        }
                    })();    
                </script>
        </div>
    </div>


````````



**This is my original code that I wnat to make it fewer characters.**


````````
<div class="divTable minimalistBlack">
    <div class="divTableHeading">
        <div class="divTableRow"> <!--Header-->
            <div class="divTableHead">STATION</div>
            <div class="divTableHead">ENTITY TYPE</div>
            <div class="divTableHead">ATS</div>
            <div class="divTableHead">FAULT</div>
            <div class="divTableHead">FEEDER1</div>
            <div class="divTableHead">SW1</div>
            <div class="divTableHead">FEEDER2</div>
            <div class="divTableHead">SW2</div>
            <div class="divTableHead">ACTIVE STATUS</div>
        </div>
    </div>
    <div class="divTableBody">
        <div class="divTableRow"> <!--Row 1-->
            <div class="divTableCell">Station 1</div>
            <div class="divTableCell">DEVICE</div>
            <div id="0" div class="divTableCell">${#0}</div>
            <div id="1" div class="divTableCell">${#1}</div>
            <div id="2" div class="divTableCell">${#2}</div>
            <div id="3" div class="divTableCell">${#3}</div>
            <div id="4" div class="divTableCell">${#4}</div>
            <div id="5" div class="divTableCell">${#5}</div>
            <div id="6" div class="divTableCell">${#6}</div>
        </div>
        <div class="divTableRow"> <!--Row 2-->
            <div class="divTableCell">Station 2</div>
            <div class="divTableCell">DEVICE</div>
            <div id="7" div class="divTableCell">${#7}</div>
            <div id="8" div class="divTableCell">${#8}</div>
            <div id="9" div class="divTableCell">${#9}</div>
            <div id="10" div class="divTableCell">${#10}</div>
            <div id="11" div class="divTableCell">${#11}</div>
            <div id="12" div class="divTableCell">${#12}</div>
            <div id="13" div class="divTableCell">${#13}</div>
        </div>
        <div class="divTableRow"> <!--Row 3-->
            <div class="divTableCell">Station 3</div>
            <div class="divTableCell">DEVICE</div>
            <div id="14" div class="divTableCell">${#14}</div>
            <div id="15" div class="divTableCell">${#15}</div>
            <div id="16" div class="divTableCell">${#16}</div>
            <div id="17" div class="divTableCell">${#17}</div>
            <div id="18" div class="divTableCell">${#18}</div>
            <div id="19" div class="divTableCell">${#19}</div>
            <div id="20" div class="divTableCell">${#20}</div>
        </div>
        <div class="divTableRow"> <!--Row 4-->
            <div class="divTableCell">Station 4</div>
            <div class="divTableCell">DEVICE</div>
            <div id="21" div class="divTableCell">${#21}</div>
            <div id="22" div class="divTableCell">${#22}</div>
            <div id="23" div class="divTableCell">${#23}</div>
            <div id="24" div class="divTableCell">${#24}</div>
            <div id="25" div class="divTableCell">${#25}</div>
            <div id="26" div class="divTableCell">${#26}</div>
            <div id="27" div class="divTableCell">${#27}</div>
        </div>
        <div class="divTableRow"> <!--Row 5-->
            <div class="divTableCell">Station 5</div>
            <div class="divTableCell">DEVICE</div>
            <div id="28" div class="divTableCell">${#28}</div>
            <div id="29" div class="divTableCell">${#29}</div>
            <div id="30" div class="divTableCell">${#30}</div>
            <div id="31" div class="divTableCell">${#31}</div>
            <div id="32" div class="divTableCell">${#32}</div>
            <div id="33" div class="divTableCell">${#33}</div>
            <div id="34" div class="divTableCell">${#34}</div>
        </div>
        <div class="divTableRow"> <!--Row 6-->
            <div class="divTableCell">Station 6</div>
            <div class="divTableCell">DEVICE</div>
            <div id="35" div class="divTableCell">${#35}</div>
            <div id="36" div class="divTableCell">${#36}</div>
            <div id="37" div class="divTableCell">${#37}</div>
            <div id="38" div class="divTableCell">${#38}</div>
            <div id="39" div class="divTableCell">${#39}</div>
            <div id="40" div class="divTableCell">${#40}</div>
            <div id="41" div class="divTableCell">${#41}</div>
        </div>
        <script>
                (function () {
                    if (${#0} == 0) {
                        document.getElementById(0).style.backgroundColor = '#F8D347';
                        }
                    else if (${#0} == 1){
                        document.getElementById(0).style.backgroundColor = '#99C262';
                        }
                    if (${#1} == 0) {
                        document.getElementById(1).style.backgroundColor = '#F8D347';
                        }
                    else if (${#1} == 1){
                        document.getElementById(1).style.backgroundColor = '#99C262';
                        }
                    if (${#2} == 0) {
                        document.getElementById(2).style.backgroundColor = '#F8D347';
                        }
                    else if (${#2} == 1){
                        document.getElementById(2).style.backgroundColor = '#99C262';
                        }
                    if (${#3} == 0) {
                        document.getElementById(3).style.backgroundColor = '#F8D347';
                        }
                    else if (${#3} == 1){
                        document.getElementById(3).style.backgroundColor = '#99C262';
                        }
                    if (${#4} == 0) {
                        document.getElementById(4).style.backgroundColor = '#F8D347';
                        }
                    else if (${#4} == 1){
                        document.getElementById(4).style.backgroundColor = '#99C262';
                        }
                    if (${#5} == 0) {
                        document.getElementById(5).style.backgroundColor = '#F8D347';
                        }
                    else if (${#5} == 1){
                        document.getElementById(5).style.backgroundColor = '#99C262';
                        }
                    if (${#6} == 0) {
                        document.getElementById(6).style.backgroundColor = '#F8D347';
                        }
                    else if (${#6} == 1){
                        document.getElementById(6).style.backgroundColor = '#99C262';
                        }
                    if (${#7} == 0) {
                        document.getElementById(7).style.backgroundColor = '#F8D347';
                        }
                    else if (${#7} == 1){
                        document.getElementById(7).style.backgroundColor = '#99C262';
                        }
                    if (${#8} == 0) {
                        document.getElementById(8).style.backgroundColor = '#F8D347';
                        }
                    else if (${#8} == 1){
                        document.getElementById(8).style.backgroundColor = '#99C262';
                        }
                    if (${#9} == 0) {
                        document.getElementById(9).style.backgroundColor = '#F8D347';
                        }
                    else if (${#9} == 1){
                        document.getElementById(9).style.backgroundColor = '#99C262';
                        }
                    if (${#10} == 0) {
                        document.getElementById(10).style.backgroundColor = '#F8D347';
                        }
                    else if (${#10} == 1){
                        document.getElementById(10).style.backgroundColor = '#99C262';
                        }
                    if (${#11} == 0) {
                        document.getElementById(11).style.backgroundColor = '#F8D347';
                        }
                    else if (${#11} == 1){
                        document.getElementById(11).style.backgroundColor = '#99C262';
                        }
                    if (${#12} == 0) {
                        document.getElementById(12).style.backgroundColor = '#F8D347';
                        }
                    else if (${#12} == 1){
                        document.getElementById(12).style.backgroundColor = '#99C262';
                        }
                    if (${#13} == 0) {
                        document.getElementById(13).style.backgroundColor = '#F8D347';
                        }
                    else if (${#13} == 1){
                        document.getElementById(13).style.backgroundColor = '#99C262';
                        }
                    if (${#14} == 0) {
                        document.getElementById(14).style.backgroundColor = '#F8D347';
                        }
                    else if (${#14} == 1){
                        document.getElementById(14).style.backgroundColor = '#99C262';
                        }
                    if (${#15} == 0) {
                        document.getElementById(15).style.backgroundColor = '#F8D347';
                        }
                    else if (${#15} == 1){
                        document.getElementById(15).style.backgroundColor = '#99C262';
                        }
                    if (${#16} == 0) {
                        document.getElementById(16).style.backgroundColor = '#F8D347';
                        }
                    else if (${#16} == 1){
                        document.getElementById(16).style.backgroundColor = '#99C262';
                        }
                    if (${#17} == 0) {
                        document.getElementById(17).style.backgroundColor = '#F8D347';
                        }
                    else if (${#17} == 1){
                        document.getElementById(17).style.backgroundColor = '#99C262';
                        }
                    if (${#18} == 0) {
                        document.getElementById(18).style.backgroundColor = '#F8D347';
                        }
                    else if (${#18} == 1){
                        document.getElementById(18).style.backgroundColor = '#99C262';
                        }
                    if (${#19} == 0) {
                        document.getElementById(19).style.backgroundColor = '#F8D347';
                        }
                    else if (${#19} == 1){
                        document.getElementById(19).style.backgroundColor = '#99C262';
                        }
                    if (${#20} == 0) {
                        document.getElementById(20).style.backgroundColor = '#F8D347';
                        }
                    else if (${#20} == 1){
                        document.getElementById(20).style.backgroundColor = '#99C262';
                        }
                    if (${#21} == 0) {
                        document.getElementById(21).style.backgroundColor = '#F8D347';
                        }
                    else if (${#21} == 1){
                        document.getElementById(21).style.backgroundColor = '#99C262';
                        }
                    if (${#22} == 0) {
                        document.getElementById(22).style.backgroundColor = '#F8D347';
                        }
                    else if (${#22} == 1){
                        document.getElementById(22).style.backgroundColor = '#99C262';
                        }
                    if (${#23} == 0) {
                        document.getElementById(23).style.backgroundColor = '#F8D347';
                        }
                    else if (${#23} == 1){
                        document.getElementById(23).style.backgroundColor = '#99C262';
                        }
                    if (${#24} == 0) {
                        document.getElementById(24).style.backgroundColor = '#F8D347';
                        }
                    else if (${#24} == 1){
                        document.getElementById(24).style.backgroundColor = '#99C262';
                        }
                    if (${#25} == 0) {
                        document.getElementById(25).style.backgroundColor = '#F8D347';
                        }
                    else if (${#25} == 1){
                        document.getElementById(25).style.backgroundColor = '#99C262';
                        }
                    if (${#26} == 0) {
                        document.getElementById(26).style.backgroundColor = '#F8D347';
                        }
                    else if (${#26} == 1){
                        document.getElementById(26).style.backgroundColor = '#99C262';
                        }
                    if (${#27} == 0) {
                        document.getElementById(27).style.backgroundColor = '#F8D347';
                        }    
                    else if (${#27} == 1){
                        document.getElementById(27).style.backgroundColor = '#99C262';
                        }
                    if (${#28} == 0) {
                        document.getElementById(28).style.backgroundColor = '#F8D347';
                        }
                    else if (${#28} == 1){
                        document.getElementById(28).style.backgroundColor = '#99C262';
                        }
                    if (${#29} == 0) {
                        document.getElementById(29).style.backgroundColor = '#F8D347';
                        }
                    else if (${#29} == 1){
                        document.getElementById(29).style.backgroundColor = '#99C262';
                        }
                    if (${#30} == 0) {
                        document.getElementById(30).style.backgroundColor = '#F8D347';
                        }
                    else if (${#30} == 1){
                        document.getElementById(30).style.backgroundColor = '#99C262';
                        }
                    if (${#31} == 0) {
                        document.getElementById(31).style.backgroundColor = '#F8D347';
                        }
                    else if (${#31} == 1){
                        document.getElementById(31).style.backgroundColor = '#99C262';
                        }
                    if (${#32} == 0) {
                        document.getElementById(32).style.backgroundColor = '#F8D347';
                        }
                    else if (${#32} == 1){
                        document.getElementById(32).style.backgroundColor = '#99C262';
                        }
                    if (${#33} == 0) {
                        document.getElementById(33).style.backgroundColor = '#F8D347';
                        }
                    else if (${#33} == 1){
                        document.getElementById(33).style.backgroundColor = '#99C262';
                        }    
                    if (${#34} == 0) {
                        document.getElementById(34).style.backgroundColor = '#F8D347';
                        }
                    else if (${#34} == 1){
                        document.getElementById(34).style.backgroundColor = '#99C262';
                        }
                    if (${#35} == 0) {
                        document.getElementById(35).style.backgroundColor = '#F8D347';
                        }
                    else if (${#35} == 1){
                        document.getElementById(35).style.backgroundColor = '#99C262';
                        }
                    if (${#36} == 0) {
                        document.getElementById(36).style.backgroundColor = '#F8D347';
                        }
                    else if (${#36} == 1){
                        document.getElementById(36).style.backgroundColor = '#99C262';
                        }
                    if (${#37} == 0) {
                        document.getElementById(37).style.backgroundColor = '#F8D347';
                        }
                    else if (${#37} == 1){
                        document.getElementById(37).style.backgroundColor = '#99C262';
                        }
                    if (${#38} == 0) {
                        document.getElementById(38).style.backgroundColor = '#F8D347';
                        }
                    else if (${#38} == 1){
                        document.getElementById(38).style.backgroundColor = '#99C262';
                        }
                    if (${#39} == 0) {
                        document.getElementById(39).style.backgroundColor = '#F8D347';
                        }
                    else if (${#39} == 1){
                        document.getElementById(39).style.backgroundColor = '#99C262';
                        }
                    if (${#40} == 0) {
                        document.getElementById(40).style.backgroundColor = '#F8D347';
                        }
                    else if (${#40} == 1){
                        document.getElementById(40).style.backgroundColor = '#99C262';
                        }
                    if (${#41} == 0) {
                        document.getElementById(41).style.backgroundColor = '#F8D347';
                        }
                    else if (${#41} == 1){
                        document.getElementById(41).style.backgroundColor = '#99C262';
                        }
                })();    
            </script>
    </div>
</div>

````````

Answer 1

撇开@adiga的观点，这很奇怪，我不确定为什么您会认为这是您的操作方式。这是一个成功循环的数据，每个循环有i++

(function() {
  //initialized i
  var i = 0;
  while (i++ < 42) { //incrementing i each time
    element = document.getElementById(i)
    if (element == null) continue;
    text = element.textContent;
    if ('${#' + i + '}' == text) {
       element.style.backgroundColor = '#F8D347';
    }
    //not resetting i to 0 here
  }
})();

<div class="divTable minimalistBlack">
  <div class="divTableHeading">
    <div class="divTableRow">
      <!--Header-->
      <div class="divTableHead">STATION</div>
      <div class="divTableHead">ENTITY TYPE</div>
      <div class="divTableHead">ATS</div>
      <div class="divTableHead">FAULT</div>
      <div class="divTableHead">FEEDER1</div>
      <div class="divTableHead">SW1</div>
      <div class="divTableHead">FEEDER2</div>
      <div class="divTableHead">SW2</div>
      <div class="divTableHead">ACTIVE STATUS</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class="divTableRow">
      <!--Row 1-->
      <div class="divTableCell">Station 1</div>
      <div class="divTableCell">DEVICE</div>
      <div id="0" div class="divTableCell">${#0}</div>
      <div id="1" div class="divTableCell">${#1}</div>
      <div id="2" div class="divTableCell">${#2}</div>
      <div id="3" div class="divTableCell">${#3}</div>
      <div id="4" div class="divTableCell">${#4}</div>
      <div id="5" div class="divTableCell">${#5}</div>
      <div id="6" div class="divTableCell">${#6}</div>
    </div>
    <div class="divTableRow">
      <!--Row 2-->
      <div class="divTableCell">Station 2</div>
      <div class="divTableCell">DEVICE</div>
      <div id="7" div class="divTableCell">${#7}</div>
      <div id="8" div class="divTableCell">${#8}</div>
      <div id="9" div class="divTableCell">${#9}</div>
      <div id="10" div class="divTableCell">${#10}</div>
      <div id="11" div class="divTableCell">${#11}</div>
      <div id="12" div class="divTableCell">${#12}</div>
      <div id="13" div class="divTableCell">${#13}</div>
    </div>
    <div class="divTableRow">
      <!--Row 3-->
      <div class="divTableCell">Station 3</div>
      <div class="divTableCell">DEVICE</div>
      <div id="14" div class="divTableCell">${#14}</div>
      <div id="15" div class="divTableCell">${#15}</div>
      <div id="16" div class="divTableCell">${#16}</div>
      <div id="17" div class="divTableCell">${#17}</div>
      <div id="28" div class="divTableCell">${#18}</div>
      <div id="19" div class="divTableCell">${#19}</div>
      <div id="20" div class="divTableCell">${#20}</div>
    </div>
    <div class="divTableRow">
      <!--Row 4-->
      <div class="divTableCell">Station 4</div>
      <div class="divTableCell">DEVICE</div>
      <div id="21" div class="divTableCell">${#21}</div>
      <div id="22" div class="divTableCell">${#22}</div>
      <div id="23" div class="divTableCell">${#23}</div>
      <div id="24" div class="divTableCell">${#24}</div>
      <div id="25" div class="divTableCell">${#25}</div>
      <div id="26" div class="divTableCell">${#26}</div>
      <div id="27" div class="divTableCell">${#27}</div>
    </div>
    <div class="divTableRow">
      <!--Row 5-->
      <div class="divTableCell">Station 5</div>
      <div class="divTableCell">DEVICE</div>
      <div id="28" div class="divTableCell">${#28}</div>
      <div id="29" div class="divTableCell">${#29}</div>
      <div id="30" div class="divTableCell">${#30}</div>
      <div id="31" div class="divTableCell">${#31}</div>
      <div id="32" div class="divTableCell">${#32}</div>
      <div id="33" div class="divTableCell">${#33}</div>
      <div id="34" div class="divTableCell">${#34}</div>
    </div>
    <div class="divTableRow">
      <!--Row 6-->
      <div class="divTableCell">Station 6</div>
      <div class="divTableCell">DEVICE</div>
      <div id="35" div class="divTableCell">${#35}</div>
      <div id="36" div class="divTableCell">${#36}</div>
      <div id="37" div class="divTableCell">${#37}</div>
      <div id="38" div class="divTableCell">${#38}</div>
      <div id="39" div class="divTableCell">${#39}</div>
      <div id="40" div class="divTableCell">${#40}</div>
      <div id="41" div class="divTableCell">${#41}</div>
    </div>
  </div>