堆棧內存溢出
  簡體   English   中英

如何用for循環中的變量替換索引？

[英]How to replace index by variable from for loop?

 原文  2019-07-02 02:45:44  0   1    javascript/ html

問題描述

我想使遙測數據表根據表中的值更改顏色。 在此平台中，它們為索引提供指向遙測數據的索引，例如“ $ {＃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>

````````

1 個解決方案

解決方案1
 0  2019-07-02 03:41:59

撇開@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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 for 循環變量作為循環的索引？ (JS) 如何從特定索引到結尾替換字符串 如何在 angular 中的 *ngFor 循環中從索引 1 而不是索引 0 開始循環？ 如何用循環替換循環？ 如何從循環中的變量中減去變量 如何將變量從 controller 替換為 (.php) 文件 如何在循環期間訪問jquery getJson調用（$ .getJson）中的索引變量？ 用於循環的Javascript，函數中的索引變量 將 Axios.then() 與 for 循環索引變量一起使用 如何在Jmeter中的腳本中使用索引聲明變量
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM