Manipulation d'une table avec JavaScript/jQuery

Question

J'ai besoin d'implémenter les fonctionnalités suivantes dans JavaScript/jQuery et son fonctionnement. J'ai une idée de comment je peux implémenter cela en utilisant beaucoup d'identifiants. Cependant, j'ai besoin de l'implémenter en utilisant des classes car celles-ci seront dynamiques et cela n'a pas de sens d'avoir un identifiant différent pour chaque ligne.

Prenez le tableau suivant comme un exemple:

<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> 

si la case de John Doe est cochée, je dois montrer l'étendue de changement pour la case cliqué respective. Par conséquent, j'ai besoin d'ajouter cet élément en utilisant jQuery. Ce qui suit est le résultat:

<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> 

si la durée CHANGE est cliqué, je dois montrer la zone de texte pour la case correspondante cliqué. Le tableau suivant sera le résultat:

<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> 

Si la case à cocher John Doe est cochée, la ligne correspondante est réverté arrière sans la zone de texte et sans la durée de changement, comme la première table

Si plus d'un case à cocher est cliqué, les lignes deuxième, troisième et ainsi de suite doivent suivre la même procédure sans perdre la fonctionnalité des cases à cocher précédemment cliqué.

Si la case CheckAll est cochée dans l'en-tête du tableau, alors toutes les lignes doivent suivre la procédure mentionnée ci-dessus.

J'ai besoin d'entendre vos opinions sur les meilleures pratiques pour y parvenir. Je connais la logique mais je n'arrive pas à le programmer avec JavaScript et jQuery. Par exemple, avec jQuery, lorsque vous stockez un élément dans une chaîne afin de pouvoir le manipuler avec JavaScript, vous n'avez plus accès au DOM.

Toute aide serait grandement appréciée

Answer 1

Essayez ceci:

$(".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; 
} 

Je nai testé mais je pense que ce serait vous aider !!

Answer 2

Vous pourriez probablement lier à l'événement de « changé » toutes les cases. Au sein de la eventHandler vous pourriez probablement faire quelque chose le long des lignes de

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

Le gestionnaire de clic du « changement » Span devrait être assez simple.