1

<tr>jqueryを使用してクリックすると、いくつかのフォーム要素を保持する新しいテーブル行を追加/削除しようとしています。いくつかのチュートリアルを使用して jquery コードを開発しようとしましたが、コードが機能しません。行を追加または削除できません。

jsfiddle でコードを表示したい場合は、以下のコードを提供しましたが、このリンクを確認してください: demo

どこが間違っているのか教えてください。ありがとう ：）

HTML

 <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
  <table class="dynatable">
        <thead>
            <tr>
                <th>Type</th>
                <th>Account Name</th>
                <th>Debit</th>
                <th>Credit</th>

            </tr>
        </thead>

     <tbody id="p_scents">

         <tr>
        <td><select name="type" id="type">
              <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
              </select> 
             </td>

             <td><select name="accounts" id="accounts">
    <option value="">SELECT</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
       </select> </td>

      <td><input type="text" name="debit_amount" id="debit_amount" /> </td>
      <td><input type="text" name="credit_amount" id="credit_amount"/></td>

      </tr>
    </tbody>
  </table>

Jクエリ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script>
  $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').live('click', function() {
        ('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);

            i++;
            return false;
     });

      //Remove button
         $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('<tr>').remove();
                    i--;
            }
            return false;
          });
       });
   </script>​​
4

4 に答える 4

4

行の削除機能を含む実際の例を次に示します：DEMO。

そしてこれが結果のJSです：

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});​

まず、HTMLにはいくつかの構文上の問題がありました（フィドルで解決されました）。.append（）を使用すると、関数が間違っており、最後の関数（'$（this）.parents（''）。remove（）;'）のセレクターは'tr'である必要があります。

そして何も：P

于 2012-07-13T08:39:05.533 に答える
3

Hiya動作デモ :) http://jsfiddle.net/9S2Sc/ フル動作バージョン http://jsfiddle.net/UBxTf/

注意が必要な点がかなりあります:また、Jquery の最新バージョンから非推奨になっている.oneventを使用してください。.live

以下の残りのコードを参照してください。

これが原因を助けることを願っています

コード

$(function() {

    var scntDiv = $('#p_scents');

    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').on('click', function() {

        $('<tr><td> <select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select> </td><td> <select name="accounts" id="accounts"> <option value="">SELECT</option> <option value="One">One</option><option value="Two">Two</option> </select>  </td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);


                i++;
                return false;
         });
});

          //Remove button
             $('#remScnt ').on('click ', function() { 
                if( i > 2 ) {
                        $(this).parents(' < tr > ').remove();
                        i--;
                }
                return false;
              });
         ​
于 2012-07-13T08:20:35.983 に答える
0

行を削除する関数に別のエラーが存在します。それは違いない

$(this).parents(' tr ').remove();

なし<と>

ヒント: ブラウザー Firefox、Chrom、および Safari には、Javascript 用のエラー コンソールが用意されています。したがって、エラーメッセージを確認できます。

于 2012-07-13T08:30:34.803 に答える
0

jQuery.append()関数は次のように使用する必要があります。

$('#addScnt').live('click', function() {
scntDiv.append('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>');

            i++;
            return false;
     });
于 2012-07-13T08:22:19.063 に答える