0

私はJSとjQueryの初心者であり、リンク（ページ下部の灰色の長方形）をクリックすると、動的に2つの行（オレンジ色の行と列を含む行）を追加したいと思います。

これがスクリーンショットです：

ここに画像の説明を入力してください これは私のHTMLコードです：

<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コード：

<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 &#8364;</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>

しかしもちろん何も起こりません。この問題について何か考えがありますか？

ありがとうございました ：）

4

3 に答える 3

2

JavaScript コードに少なくとも 1 つのエラーがあります。

var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + ');

連結の最後に余分な + ' があります

おそらく次のようになります。

var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar + '</tr>');

編集：

また、使用しているrowNumber変数は、リンクをクリックするたびにリセットされるため、リンクをクリックするたびに上向きに繰り返されないことに注意してください。そのためにグローバル変数を使用するか、タイトル行を行番号で更新する場合は、代わりにボタンがクリックされるたびにテーブルから行数を取得します。

于 2012-04-08T12:38:03.820 に答える
0

多くの問題があります。

指摘したように'、行を連結するときにクロージングがありません。

ただし、文字列ではなくjQueryオブジェクトを連結しようとしています。jQueryオブジェクトはまったく必要ありません。

+ '' +また、変数の連結の間にある必要はありません。

var rowNumber = 3;

$('.AddResults').click(function(){

    // Concatenate the cells into a single string
    var cells = 
      '<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>' +
      '<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>' +
      '<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>' +
      '<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>' +
      '<td class="tt_td"><strong>4h.</strong></td>' +
      '<td class="pttc_td"><strong>88 &#8364;</strong></td>' +
      '<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>' + cells + '<tr>'

    //Append the new row to the body of the #table_prest table
    $('#table_prest tbody').append(newTitreRow + newContentRow);

    //Iterate row number
    rowNumber++;
});
于 2012-04-08T12:51:19.980 に答える
0

問題は、下の行の最後の一重引用符 ' を忘れたことだと思います

  var newContentRow = $('<tr>' + jourVar + '' + creneauVar + '' + repassageVar + '' + menageVar + '' + totalVar + '' + pttcVar + '' + corVar );
于 2012-04-08T12:41:48.807 に答える