Comment ajouter des lignes à une table à l'aide de jQuery?

Salut J'essayais d'ajouter une ligne à une table en utilisant jQuery, mais cela ne fonctionne pas.
Quelle pourrait être la raison?Comment ajouter des lignes à une table à l'aide de jQuery?

Et puis-je ajouter de la valeur à la ligne nouvellement ajoutée ..?

Voici le code:

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $('a').click(function() { 
      $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>'); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <a href="">Link</a> 
    <table id="myTable"> 
     <tbody> 
      <tr> 
       <td> 
        test 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Source

2010-01-29 Amit

Le code suivant fonctionne

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function AddRow() 
{ 
    $('#myTable').append('<tr><td>test 2</td></tr>') 
} 
</script> 
<title></title> 
</head> 
<body> 
<input type="button" id="btnAdd" onclick="AddRow()"/> 
<a href="">test</a> 
<table id="myTable"> 
    <tbody > 
    <tr> 
     <td> 
     test 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Remarque this will work as of jQuery 1.4 même si la table comporte un élément <tbody>: (?)

jQuery depuis la version 1.4 détecte automatiquement si l'élément que vous essayez d'insérer (en utilisant l'un des append(), précédez(), avant(), ou after() méthodes) est un <tr> et l'insère dans le premier <tbody> dans votre table ou l'enveloppe dans un nouveau <tbody> s'il n'en existe pas.

Source

2010-01-29 10:17:14 Amit

et les suivants peuvent également être utilisés var value1 = 1; $ ('# myTable'). Append ('' + valeur1 + '') – Amit

Vous devez ajouter à la table et non les lignes.

<script type="text/javascript"> 
$('a').click(function() { 
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>'); 
}); 
</script>

Source

2010-01-29 09:16:54 rsilva4

I essayé le ci-dessus, mais n'a pas fonctionné .. :( – Amit

ok, vous faites quelque chose d'autre faux, s'il vous plaît vérifier ici (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) votre propre code avec mon solut ion ou solution dominique, vous verrez que cela fonctionne. – rsilva4

Je suppose que vous voulez ajouter cette ligne à l'élément <tbody>, et en utilisant simplement append() sur le <table> insérera le <tr> en dehors de la <tbody>, avec des résultats peut-être indésirables.

$('a').click(function() { 
    $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
});

EDIT: Voici le code source complet, et il ne fait le travail. (Notez le $(document).ready(function(){});, qui n'a pas été présent avant

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('a').click(function() { 
     $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
    }); 
}); 
</script> 
<title></title> 
</head> 
<body> 
<a href="javascript:void(0);">Link</a> 
<table id="myTable"> 
    <tbody> 
    <tr> 
     <td>test</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Source

2010-01-29 09:19:06

Dans mon expérience, vous ne pouvez pas modifier le contenu html d'une table. Essayez d'utiliser document.createElement ("tr") et document.appendElement() – mrwayne

J'ai modifié votre source pour qu'elle fonctionne correctement.(Notez la modification ci-dessus) Je n'ai pas remarqué cela auparavant, mais vous n'aviez pas le '$ (document) .ready()' inclus, ce qui casse tout. À moins que vous n'attendiez que l'événement 'ready()' se déclenche, le DOM n'est pas chargé et votre sélecteur jQuery ne trouvera probablement pas ce qu'il cherche. –

N'oubliez pas d'inclure "tbody" comme show dans l'exemple source. –

Essayez:

$("#myTable").append("<tr><%= escape_javascript(render :partial => name_of_partial) %></tr>");

Et dans le partial, vous devriez avoir:

<td>row1</td> 
<td>row2</td>

Source

2010-01-29 12:25:13

Peut-être est la réponse que vous recherchez. Il trouve la dernière instance de <tr /> et ajoute la nouvelle ligne après:

<script type="text/javascript"> 
    $('a').click(function() { 
     $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>'); 
    }); 
</script>

Source

2013-06-28 08:59:25

Je l'utilise toujours le code ci-dessous pour plus lisible

$('table').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

ou si elle a tbody

$('table').find('tbody').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

Source

2017-02-06 08:41:43

cela peut-il être fait dans vanille Js? – PirateApp

Comment ajouter des lignes à une table à l'aide de jQuery?

Répondre

Questions connexes