私はJSとjQueryの初心者です。リンクをクリックすると、動的に2行(オレンジ色の行と列を含む行)を追加します。ページの下部に灰色の四角形が表示されます)。テーブルに2行を動的に追加するには
ここではスクリーンショットです:
<div class="ajout_prest">
<p class="txt_ajout">
<a class="AddResults" href="#">Ajouter une nouvelle prestation</a>
</p>
<p class="plus_ajout">
<a class="AddResults" href="#">+</a>
</p>
</div>
そして、JSコード::これは私のHTMLコードです
<script>
$('.AddResults').click(function(){
var rowNumber = 3;
// All the cols
var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
var pttcVar = $('<td class="pttc_td"><strong>88 €</strong></td>') ;
var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;
//Create 2 new rows
var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + ');
//Append the new row to the body of the #table_prest table
$('#table_prest tbody').append(newTitreRow);
$('#table_prest tbody').append(newContentRow);
//Iterate row number
rowNumber++;
});
</script>
しかし、もちろん何も起こりません。あなたはこの問題について考えていますか?
はあなたに:)ありがとう
ありがとうございます。今すぐRowNumber変数で動作し、最初の行(オレンジ色の1行)が追加されます。 2番目の「newContentRow」は表示されません – Copernic
もう1つの答えで述べたように、実行中にjQueryオブジェクトを文字列に連結することはできません。 newContentRowの個々のセルのjQueryオブジェクトを削除して文字列を使用するか、newContentRowにセルを追加するときに代わりに.appendメソッドを使用してください。 http://jsfiddle.net/ioncache/6kkfr/3/ – ioncache
ありがとうございました:) – Copernic