javascript forループを使用して各クラスを生成する方法は？

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

イムないあなたがやろうとしているが、私はあなたがテンプレートを取り、クラス名に反復を追加している感覚を持っているものを明確に。そうであれば、構文はgetElementByIdを呼び出していますが、クラス名を照会しています。

おそらく、あなたが呼び出す場所の関数でnは値を与えると、あなたの関数を呼び出す必要があり

getElementsByClassName("boxed") 

Answer 2

を試してみてください。これは、あなたが私はあなたが使用している

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

ところで作業you.Alsoため、このループを、それを修正することができ、より説明している場合、あなたは多分追求しようとするものではありませんJavaScript jqueryを使用すると、作業が簡単になります。それはあなたが単にこの機能を使うことができるクラスを追加する機能を内蔵しています。自分で作成する必要はありません。