如何使用JavaScript for loop生成每個類？

Question

我試圖用javascript函數動態地生成幾個相同的類（名爲「boxed」類）。這是我試過的。我想用給定的數字創建相同的類（名爲「boxed」類）。該數字將是我的csv文件中的列數。以下是結果和示例代碼的快照。 enter image description here

<script> 
function addClass(var n) { 
    var myClass = document.getElementById("boxed") 
    for (var i = 0; i< n; i ++){ 

    } 
} 
</script> 

//

<style type="text/css"> 
table { 
font-family: arial, sans-serif; 
border-collapse: collapse; 
width: 100%; 
} 

.boxed{ 
border: 1px solid blue; 
padding: 10px 
} 
</style> 



<div class="boxed"> 
    <p>${titile}</p><br> 
    <p>${image}</p><br> 
    <table class="grid" cellspacing="10"> 
    <tr> 
    <td></td> 
    <td>Strongly<br>Disagree</td> 
    <td>Disagree</td> 
    <td>Neither agree<br/>nor disagree</td> 
    <td>&nbsp;&nbsp;&nbsp;Agree&nbsp;&nbsp;&nbsp;</td> 
    <td>&nbsp;Strongly&nbsp;<br>Agree</td> 
    </tr> 
    <tr> 
    <td class="griditem">survey1</td> 
    <td><input type=radio name="survey1" value="-2">-2</td> 
    <td><input type=radio name="survey1" value="-1">-1</td> 
    <td><input type=radio name="survey1" value="0">0</td> 
    <td><input type=radio name="survey1" value="1">1</td> 
    <td><input type=radio name="survey1" value="2">2</td> 
    </tr> 
    <tr> 
    <td class="griditem">survey2</td> 
    <td><input type=radio name="survey2" value="-2">-2</td> 
    <td><input type=radio name="survey2" value="-1">-1</td> 
    <td><input type=radio name="survey2" value="0">0</td> 
    <td><input type=radio name="survey2" value="1">1</td> 
    <td><input type=radio name="survey2" value="2">2</td> 
    </tr> 
    <tr> 
    <td class="griditem">survey3</td> 
    <td><input type=radio name="survey3" value="-2">-2</td> 
    <td><input type=radio name="survey3" value="-1">-1</td> 
    <td><input type=radio name="survey3" value="0">0</td> 
    <td><input type=radio name="survey3" value="1">1</td> 
    <td><input type=radio name="survey3" value="2">2</td> 
    </tr> 
    </table> 
</div> 

Answer 1

IM在你正在嘗試做的，但我有一種感覺，你正在服用的模板，並附加迭代到類名稱不明確。如果是這樣，那麼你的語法調用getElementById，但你查詢類名。

也許嘗試

getElementsByClassName("boxed") 

Answer 2

你打電話給你的函數給出值，它是在功能n，其中調用。這是不是你嘗試尋求也許如果你解釋我越能解決它的you.Also這個循環BTW工作

function addClass(n) { 
 
    for (var i = 0; i< n; i ++){ 
 
\t \t console.log('countet '+i+' times'); 
 
    } 
 
} 
 
window.addClass(100);

table { 
 
font-family: arial, sans-serif; 
 
border-collapse: collapse; 
 
width: 100%; 
 
} 
 

 
.boxed{ 
 
border: 1px solid blue; 
 
padding: 10px 
 
}

<div class="boxed"> 
 
    <p>${titile}</p><br> 
 
    <p>${image}</p><br> 
 
    <table class="grid" cellspacing="10"> 
 
    <tr> 
 
    <td></td> 
 
    <td>Strongly<br>Disagree</td> 
 
    <td>Disagree</td> 
 
    <td>Neither agree<br/>nor disagree</td> 
 
    <td>&nbsp;&nbsp;&nbsp;Agree&nbsp;&nbsp;&nbsp;</td> 
 
    <td>&nbsp;Strongly&nbsp;<br>Agree</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="griditem">survey1</td> 
 
    <td><input type=radio name="survey1" value="-2">-2</td> 
 
    <td><input type=radio name="survey1" value="-1">-1</td> 
 
    <td><input type=radio name="survey1" value="0">0</td> 
 
    <td><input type=radio name="survey1" value="1">1</td> 
 
    <td><input type=radio name="survey1" value="2">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="griditem">survey2</td> 
 
    <td><input type=radio name="survey2" value="-2">-2</td> 
 
    <td><input type=radio name="survey2" value="-1">-1</td> 
 
    <td><input type=radio name="survey2" value="0">0</td> 
 
    <td><input type=radio name="survey2" value="1">1</td> 
 
    <td><input type=radio name="survey2" value="2">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="griditem">survey3</td> 
 
    <td><input type=radio name="survey3" value="-2">-2</td> 
 
    <td><input type=radio name="survey3" value="-1">-1</td> 
 
    <td><input type=radio name="survey3" value="0">0</td> 
 
    <td><input type=radio name="survey3" value="1">1</td> 
 
    <td><input type=radio name="survey3" value="2">2</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 3

function addClass(var n) { 
 
    var myClass = []; 
 
    for (var i = 1; i<= n; i ++){ 
 
\t \t \t var val = $('input[name=survey'+i+']:checked').val(); 
 
     myClass['survey'+i+''].push(val) 
 
    } 
 
    console.log(myClass); 
 
}

Answer 4

您正在使用JavaScript，如果你使用jQuery這將真正簡化你的工作。它內置了添加類功能，你可以簡單地使用這個功能。你不必自己創建它。