Glisser vers le bas et éditer dans le tableau HTML

Question

Fondamentalement, j'ai une table html avec un tas de données à partir d'une base de données (MySQL).

Je voudrais être en mesure d'appuyer sur un lien et avoir une table donnée glisser vers le bas pour développer dans la zone d'édition.

Je voudrais utiliser Ajax pour remplir cet espace d'édition avec les données de détail à partir de la base de données.

Ce serait donc ma table:

<table> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Edit</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>House</td> 
     <td>5000</td> 
     <td><a href="">Edit</a></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Dog</td> 
     <td>2000</td> 
     <td><a href="">Edit</a></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Cat</td> 
     <td>1000</td> 
     <td><a href="">Edit</a></td> 
    </tr> 
</table> 

Si je voulais changer toute une ligne de ma table en utilisant Ajax, je ne peux pas vient de mettre un div autour de la balise tr parce que tout n » t travail. I besoin de mais un div autour de tous mes tags td. Je veux juste un normal pour apparaître dans la ligne de table sans les séparations de ligne, un peu dans ce style :

<table> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Edit</th> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <div id="row_1"> 
       <form method="post" action="" > 
       <input type="hidden" name="ID" value="1"> 
        <table> 
         <tr> 
          <td>Name</td> 
          <td> 
           <input type="text" name="Name" value="House" /> 
          </td> 
         </tr> 
         <tr> 
          <td>Value</td> 
          <td> 
           <input type="text" name="Value" value="5000" /> 
          </td> 
         </tr> 
         <tr> 
          <td colspan="2"> 
           <input type="submit" /> 
          </td> 
         </tr> 
        </table> 
       </form> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td><div id="row_2_id">2</div></td> 
     <td><div id="row_2_name">Dog</div></td> 
     <td><div id="row_2_value">2000</div></td> 
     <td><div id="row_2_edit"><a href="">Edit</a></div></td> 
    </tr> 
    <tr> 
     <td><div id="row_3_id">3</div></td> 
     <td><div id="row_3_name">Cat</div></td> 
     <td><div id="row_3_value">1000</div></td> 
     <td><div id="row_3_edit"><a href="">Edit</a></div></td> 
    </tr> 
</table> 

J'ai déjà une idée sur la façon de faire le tout glissement. Mais J'ai des difficultés avec l'ensemble est de remplacer une ligne entière d'une table en utilisant ajax. Quelqu'un a une idée de ce qu'il faut faire, où placer les divs pour prendre soin de toute cette affaire.

Answer 1

N'utilisez pas de tables. Utilise les Divs. Utilisez jquery.

$("#myButton").click(function(){ 

      var dataString = "yourparameters" 

      $.ajax({ 
      type: "GET", 
      dataType: "html", 
      cache: false, 
      url: "yourServlet", 
      data: dataString, 
      success: function(data) { 
       $("#yourDiv").html(data); 
       $("#yourDiv").show(); //assumes it was hidden before 
       } 
      }); 
     } 

});