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

Salut j'ai essayer d'ajouter une ligne à une table à l'aide de jQuery, mais il n'est pas de travail.

Quelle pourrait être la raison?

Et, je peux mettre en valeur à la nouvelle ligne..?

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>
InformationsquelleAutor Amit | 2010-01-29
  1. 52

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

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

    EDIT: Voici le code source complet, et il ne fonctionne en effet: (Notez le $(document).ready(function(){});, ce qui n'était pas présent auparavant.

    <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>
    • dans mon expérience, vous ne pouvez pas modifier le code html contenu d'une table. Essayez d'utiliser document.createElement("tr"), et le document.appendElement()
    • J'ai modifié votre source de sorte qu'il devrait fonctionner correctement. (Note de l'édition ci-dessus), je n'avais pas remarqué cela avant, mais vous n'avez pas le $(document).ready() inclus, ce qui en fait des sauts de tout. À moins que vous attendez pour le ready() cas d'incendie, le DOM n'est pas chargée et votre sélecteur jQuery ne sera probablement pas trouver ce qu'elle cherche.
    • N'oubliez pas de faire inclure "tbody" comme le montre la source de l'exemple.
    InformationsquelleAutor Dominic Barnes
  2. 23

    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>

    Note cela ne fonctionne que de jQuery 1.4 même si le tableau contient un <tbody> élément:

    jQuery depuis la version 1.4(?) détecte automatiquement si l'élément que vous voulez insérer (à l'aide de toute append(), prepend(), avant(), ou après() méthodes) est un <tr> et l'insère dans le premier <tbody> dans votre table ou l'enroule dans une nouvelle <tbody> si l'un n'existe pas.

    • et suivant peut être utilisé trop var valeur1 = 1; $('#matable').append('<tr><td>' + valeur1+'</td></tr>')
    InformationsquelleAutor Amit
  3. 9

    C'est peut-être la réponse que vous cherchez. 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>
    InformationsquelleAutor Naveen Kumar
  4. 8

    J'ai toujours utiliser ce 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 une 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(''));
    • cela peut être fait en vanilla Js?
    InformationsquelleAutor Yusril Herlian Syah
  5. 3

    Vous devez ajouter à la table et pas sur les lignes.

    <script type="text/javascript">
$('a').click(function() {
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
    • J'ai essayé ci-dessus, mais ne fonctionne pas.. 🙁
    • ok, vous avez fait quelque chose de mal, cochez ici (secretgeek.net/rtjqe/realtimejqueryeditor.htm) de votre propre code avec ma solution ou dominic solution vous allez voir que les œuvres.
    InformationsquelleAutor rsilva4
  6. 2

    Essayer:

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

    Et dans le partial, vous devriez avoir:

    <td>row1</td>
<td>row2</td>
    InformationsquelleAutor Punit Rathore
  7. 0

    Testé & Travail

    À ajouter en tant que première ligne du tableau

    $(".table tbody").append("<tr><td>New row</td></tr>");

    À ajouter en tant que dernière ligne du tableau

    $(".table tbody").prepend("<tr><td>New row</td></tr>");
    InformationsquelleAutor Super Model