JavaScript/jQueryでテーブルを操作する

Question

JavaScript/jQueryで以下の機能を実装する必要があります。私はたくさんのIDを使ってこれをどのように実装できるか考えています。しかし、クラスを使用して実装する必要があります。これらは動的であり、すべての行に異なるIDを持つことは意味がないからです。

は、例として、次の表を参照してください：ジョン・ドウのチェックボックスがチェックされている場合

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="Names" value="CheckAll" /></th> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>Location</th> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name1" /></td> 
      <td>John</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">UK</span></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name2" /></td> 
      <td>Jayne</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">Scotland</span></td> 
     </tr> 
    </thead> 
</table> 

を、私はそれぞれのクリックされたチェックボックスの変更スパンを表示する必要があります。したがって、jQueryを使用してこの要素を追加する必要があります。以下はその結果次のようになります。

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="Names" value="CheckAll" /></th> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>Location</th> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td> 
      <td>John</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">UK</span>&nbsp;<span class="defaultLocation">Change</span></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name2" /></td> 
      <td>Jayne</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">Scotland</span></td> 
     </tr> 
    </thead> 
</table> 

CHANGEスパンがクリックされた場合、私はクリックされたそれぞれのチェックボックスのためのテキストボックスを表示する必要があります。以下の表は、結果になります。

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="Names" value="CheckAll" /></th> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>Location</th> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td> 
      <td>John</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">UK&nbsp;<input type="text" /></span></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="Names" value="Name2" /></td> 
      <td>Jayne</td> 
      <td>Doe</td> 
      <td class="changable"><span class="location">Scotland</span></td> 
     </tr> 
    </thead> 
</table> 

ジョン・ドウのチェックボックスがオフの場合、それぞれの行は、テキストボックスことなく、変更することなく、スパンバック戻され、最初の表のよう

つ以上の場合チェックボックスをクリックすると、2番目、3番目などの行は以前にクリックされたチェックボックスから機能を失うことなく同じ手順に従う必要があります。

テーブルヘッダーからCheckAllチェックボックスをクリックすると、すべての行が上記の手順に従わなければなりません。

これを達成するためのベストプラクティスについて意見を述べる必要があります。私はそのロジックを知っていますが、私はJavaScriptとjQueryでプログラミングすることはできません。たとえば、jQueryでは、要素を文字列に格納してプレーンJavaScriptで操作できるようにすると、DOMへの単純なアクセスがなくなります。

すべてのヘルプは大幅に

Answer 1

このお試しください：私はhaventは

$(".myClass").click(function(){ 
    if(this.checked){ 
    var changeElement = getChangeElement() 
    $(this).parents('tr').children('.changable').append($(changeElement)) 
    attachEventsToCHANGE() 
    }else{ 
    $(this).parents('tr').children('.changable .defaultLocation').remove() 
    } 
}) 

function getChangeElement(){ 
    var changeElement= $("<span class='defaultLocation'>Change</span>") 
    $(changeElement).click(function(){ 
     $(this).after("<input type='text' />") 
     $(this).remove() 
    }) 
    return changeElement; 
} 

はそれをテストしたが、私はそれはあなたを助けると思います！

Answer 2

をいただければ幸いあなたはおそらく、すべてのチェックボックスの「変更」イベントに特異的に結合することができます。イベントハンドラの中であなたはおそらく

function changeHandler(event) { 
if ($(this).val('checked') == checked) { 
    $(this).parents('tr').children('.changeable').append('<span>bla<span>'); 
} else { 
    $(this).parents('tr').children('.defaultLocation').remove(); 
} 

「変更」のクリックハンドラの線に沿って何かを行うことができますスパンはかなりまっすぐ進むべきです。