はどのように私はjQueryの

Question

を使用して、テキスト入力にHTMLテーブルのセルを変更できます

だから私は、テーブルには、以下に示されている：

<tbody> 
 
    <thead> 
 
    <tr> 
 
     <th>Date Registered</th> 
 
     <th>Name</th> 
 
     <th>Organisation</th> 
 
     <th>Email</th> 
 
     <th>Job Title</th> 
 
     <th>LSA</th> 
 
     <th>Edit</th>     
 
    </tr> 
 
    </thead> 
 
    
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input id="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input id="editValues" type="button" value="Edit"></td> 
 
    </tr>

3つのカラム名、組織と電子メールをする必要があります編集ボタンをクリックすると編集可能ですが、関連行にのみ表示されます。だから今

、「editValues」のidを持つ「編集」ボタンを、私はこのjQueryのクリックイベントにバインドされている：現在の状態で

<script type="text/javascript"> 
 
     $('#editValues').click(function() { 
 
     $('tr td:nth-child(2)').each(function() { 
 
      var html = $(this).html(); 
 
      var input = $('<input class="editableColumnsStyle" id="editName" type="text" />'); 
 
      input.val(html); 
 
      $(this).html(input); 
 
     }); 
 
     });

この関数が選択されますすべてのテーブル行にすべてのtd：nth-​​child（2）。

私が必要とするのは、クリックされた編集ボタンの関連する行だけで、td：nth-​​child（2）、td：nth-​​child（3）、td：nth-​​child（4） 。あなたが複数のHTML要素を扱っているときに、そのような場合には、IDを使用することはできませんので

<td><input class="editValues" type="button" value="Edit"></td> 

へ

<td><input id="editValues" type="button" value="Edit"></td> 

：

Answer 1

id属性の値は、あなたのボタンの選択のためのあなたのように活用クラス属性、あなたのDOMで一意である必要があります。

私はあなたのための例を作成しました：

$('.editValues').click(function() { 
 
    $(this).parents('tr').find('td.editableColumns').each(function() { 
 
    var html = $(this).html(); 
 
    var input = $('<input class="editableColumnsStyle" type="text" />'); 
 
    input.val(html); 
 
    $(this).html(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border=1> 
 
<tbody> 
 
    <thead> 
 
    <tr> 
 
     <th>Date Registered</th> 
 
     <th>Name</th> 
 
     <th>Organisation</th> 
 
     <th>Email</th> 
 
     <th>Job Title</th> 
 
     <th>LSA</th> 
 
     <th>Edit</th>     
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input class="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input class="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 
</table>

Answer 2

のようなあなたのコード内のいくつかの変更を行います。

あなたのjsのスクリプトは次のようになる：

$('.editValues').click(function() { 
    $(this).closest('tr'); 
    // this will return you the parnet tr, now apply dom traversing and make any column editable by appending a textbox in the corresponding td 
}); 

Answer 3

をあなたはまた、デフォルトではテーブルのセルに入力を追加し、それらを無効にし、その他の境界線と背景を非表示にするスタイリングを使用することができますjQuery onClickを使用すると、無効な属性を削除できます。