Comment changer les éléments de la table dans ce code Javascript?

Question

Je trouve un code fantastique qui répond aux besoins de mon projet d'ici:

http://www.askthecssguy.com/examples/rowlock/example9.html

J'ai modifié le code de sorte que lorsque l'utilisateur sélectionne un élément et puis clique sur un bouton les données sont traitées (par exemple effacer les données d'une base de données sur le serveur)

Je n'ai pas été capable de comprendre comment désactiver l'action à nouveau. J'ai essayé de désactiver le bouton radio. Le code réactive en quelque sorte le bouton radio. J'ai mis le bouton radio à null. Cela aussi n'a pas fonctionné. Ma dernière pensée était de changer le texte dans la 2ème colonne (le premier est le bouton radio) comme un moyen de tester si le code a déjà été supprimé, mais je ne peux pas comprendre comment accéder à cette colonne et modifier le texte.

Ceci est le code d'origine à partir du lien ci-dessus:

function lockRow() { 
var tables = document.getElementsByTagName("table"); 
for (var m=0; m<tables.length; m++) { 
    if (tables[m].className == "pickme") { 
     var tbodies = tables[m].getElementsByTagName("tbody"); 
     for (var j=0; j<tbodies.length; j++) { 
      var rows = tbodies[j].getElementsByTagName("tr"); 
      for (var i=0; i<rows.length; i++) { 
       rows[i].oldClassName = rows[i].className; 
       rows[i].onclick = function() { 
        if (this.className.indexOf("selected") != -1) { 
         this.className = this.oldClassName; 
        } else { 
         removeSelectedStateFromOtherRows(); 
         addClass(this,"selected"); 
        } 
        selectRowRadio(this); 
       } 
      } 
     } 
    } 
} 

Ce que je piraté jusqu'à:

function testloop() 
{ 
var tables = document.getElementsByTagName("table"); 
    for (var m=0; m<tables.length; m++)  {  
    var tbodies = tables[m].getElementsByTagName("tbody"); 
    for (var j=0; j<tbodies.length; j++) { 
     var rows = tbodies[j].getElementsByTagName("td"); 
     for (var i=0; i<rows.length; i++) { 
      r = rows[ i ] ; 
       // r is the radio button. 
       //How do I access the text in the 2nd column? 
     }   
    } 
} 

}

Si la ligne avec 'domestique' a été sélectionné, je J'aimerais changer 'Domestic' en 'Deleted'. Je peux détecter cela dans d'autres codes et gérer cette action.

Est-ce que cela a un sens? Y a-t-il une manière plus intelligente ou plus facile de ce que j'essaie d'accomplir? Mes capacités Javascript manquent cruellement. Je vous remercie.

<tr> 
<td> 
    <input 
     type="radio" 
     name="choice" 
     value="walalala" /> 
</td> 
<td>Domestic</td> 
<td>Titanic</td> 
<td>$600,788,188</td> 

Answer 1

Vous avez plusieurs choix en fonction de ce que vous voulez vraiment faire.

1. Vous pouvez simplement supprimer la ligne correspondante - l'utilisateur ne peut pas la sélectionner et un autre code ne la trouvera pas.
2. Vous pouvez ajouter par exemple la classe "removed" à la ligne/entrée lorsque l'utilisateur l'envoie à votre serveur. La prochaine fois que l'utilisateur veut envoyer quelque chose, vérifiez si la ligne actuellement sélectionnée n'a pas de classe "supprimée".
3. Identique à 2, mais en utilisant les attributs data-xxx HTML5.

Quelque chose comme cela devrait fonctionner (en utilisant jQuery):

$('button').click(function(event) { 
    var i = $('input:checked'); 
    if (i.hadClass('removed')) 
    event.preventDefault(); 
    else 
    i.addClass('removed'); 
});