クエリから取得した結果に応じて、最初の行と最初の列を追加します。このようにして、行数と列数はクエリの結果によって決まります。これは時間とともに変化する可能性があります。私は残りの列と行を追加し、クラスの最初の行と最初の列に基づいてテーブルの他の行と列に "クラス"を追加するためにjQueryを使いたいとします。テーブルに複数の列と行を追加する
これは私の現在のテーブルです:
<table class="numAlpha" border="1">
<tr>
<th bgcolor="#ff9999"></th>
<th class="alpha a" bgcolor="#5588bb">a</th>
<th class="alpha b" bgcolor="#5588bb">b</th>
<th class="alpha c" bgcolor="#5588bb">c</th>
<th class="alpha d" bgcolor="#5588bb">d</th>
<th class="alpha e" bgcolor="#5588bb">e</th>
</tr>
<tr>
<td class="num 1" bgcolor="#5588bb">1</td>
</tr>
<tr>
<td class="num 2" bgcolor="#5588bb">2</td>
</tr>
<tr>
<td class="num 3" bgcolor="#5588bb">3</td>
</tr>
<tr>
<td class="num 4" bgcolor="#5588bb">4</td>
</tr>
<tr>
<td class="num 5" bgcolor="#5588bb">5</td>
</tr>
</table>
jQueryの
var alphas = [];
var num;
$('.exportBtn').click(function(event) {
$('.numAlpha th').each(function(i, el) {
if($(el).attr('class'))
alphas.push($(el).attr('class').slice(6));
});
$('.numAlpha td').each(function(i, el) {
if($(el).attr('class')){
num = $(el).attr('class').slice(4);
}else{
$(el).addClass(num + alphas[(i-1)]);
}
});
});
私は私のテーブルは次のようになりたい:
<table class="numAlpha" border="1">
<tr>
<th bgcolor="#ff9999"></th>
<th class="alpha a" bgcolor="#5588bb">a</th>
<th class="alpha b" bgcolor="#5588bb">b</th>
<th class="alpha c" bgcolor="#5588bb">c</th>
<th class="alpha d" bgcolor="#5588bb">d</th>
<th class="alpha e" bgcolor="#5588bb">e</th>
</tr>
<tr>
<td class="num 1" bgcolor="#5588bb">1</td>
<td class="1a"></td>
<td class="1b"></td>
<td class="1c"></td>
<td class="1d"></td>
<td class="1e"></td>
</tr>
<tr>
<td class="num 2" bgcolor="#5588bb">2</td>
<td class="2a"></td>
<td class="2b"></td>
<td class="2c"></td>
<td class="2d"></td>
<td class="2e"></td>
</tr>
<tr>
<td class="num 3" bgcolor="#5588bb">3</td>
<td class="3a"></td>
<td class="3b"></td>
<td class="3c"></td>
<td class="3d"></td>
<td class="3e"></td>
</tr>
<tr>
<td class="num 4" bgcolor="#5588bb">4</td>
<td class="4a"></td>
<td class="4b"></td>
<td class="4c"></td>
<td class="4d"></td>
<td class="4e"></td>
</tr>
<tr>
<td class="num 5" bgcolor="#5588bb">5</td>
<td class="5a"></td>
<td class="5b"></td>
<td class="5c"></td>
<td class="5d"></td>
<td class="5e"></td>
</tr>
</table>
この場合には、私は5rowsx5columnsを追加する必要があります与えますそれらの対応する最初の行と列を持つクラス?どのように私はjQueryでこれをすべて行うことができますか?
が今私のテーブルはそうのようになります。
私はそれは次のようになりたい:
これは私のFiddle
はSO無料コーディングサービスではありません。あなたが既に試したコードとそれがうまくいかないかの説明を含めるようにあなたの質問を編集してください。 – MJH
あなたは何もしようとしていません。それは単なるHTMLです。 'tableRowElement [elementNumber] .insertCell(cellNumber)'をループします。 – PHPglue
@MJH jqueryをいくつか追加しましたが、動作させることができません – rashmeePrakash