Ποια είναι η καλύτερη μέθοδος στην jQuery για να προσθέσετε μια επιπλέον γραμμή σε έναν πίνακα ως τελευταία γραμμή;
Είναι αυτό αποδεκτό;
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Υπάρχουν περιορισμοί στο τι μπορείτε να προσθέσετε σε έναν τέτοιο πίνακα (όπως είσοδοι, επιλογές, αριθμός γραμμών);
Η προσέγγιση που προτείνετε δεν είναι εγγυημένο ότι θα σας δώσει το αποτέλεσμα που ψάχνετε - τι θα γινόταν αν είχατε ένα "σώμα" για παράδειγμα:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Θα καταλήγατε με τα ακόλουθα:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Επομένως, θα συνιστούσα αυτή την προσέγγιση:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Μπορείτε να συμπεριλάβετε οτιδήποτε μέσα στη μέθοδο after()
εφόσον πρόκειται για έγκυρη HTML, συμπεριλαμβανομένων πολλαπλών γραμμών όπως στο παραπάνω παράδειγμα.
Επικαιροποίηση: Επανεξέταση αυτής της απάντησης μετά την πρόσφατη δραστηριότητα με αυτή την ερώτηση. eyelidlessness κάνει ένα καλό σχόλιο ότι θα υπάρχει πάντα ένα tbody
στο DOM- αυτό είναι αλήθεια, αλλά μόνο αν υπάρχει τουλάχιστον μία γραμμή. Αν δεν έχετε καμία γραμμή, δεν θα υπάρχει tbody
εκτός αν έχετε ορίσει εσείς οι ίδιοι ένα.
Ο DaRKoN_ προτείνει την προσθήκη στο tbody
αντί να προσθέτει περιεχόμενο μετά το τελευταίο tr
. Αυτό παρακάμπτει το πρόβλημα της μη ύπαρξης γραμμών, αλλά και πάλι δεν είναι αλεξίσφαιρο, καθώς θεωρητικά θα μπορούσατε να έχετε πολλαπλά στοιχεία tbody
και η γραμμή θα προστίθετο σε καθένα από αυτά.
Ζυγίζοντας τα πάντα, δεν είμαι σίγουρος ότι υπάρχει μια μοναδική λύση μιας γραμμής που να καλύπτει κάθε πιθανό σενάριο. Θα πρέπει να βεβαιωθείτε ότι ο κώδικας jQuery συμφωνεί με τη σήμανσή σας.
Νομίζω ότι η ασφαλέστερη λύση είναι πιθανώς να διασφαλίσετε ότι ο table
σας περιλαμβάνει πάντα τουλάχιστον ένα tbody
στη σήμανσή σας, ακόμη και αν δεν έχει γραμμές. Σε αυτή τη βάση, μπορείτε να χρησιμοποιήσετε το παρακάτω, το οποίο θα λειτουργήσει όσες σειρές και αν έχετε (και θα λαμβάνει επίσης υπόψη του πολλαπλά στοιχεία tbody
):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Τι θα γινόταν αν είχατε ένα "σώμα" και ένα "πόδι";
Όπως:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Τότε θα εισάγει τη νέα σας γραμμή στο υποσέλιδο - όχι στο σώμα.
Ως εκ τούτου, η καλύτερη λύση είναι να συμπεριλάβετε μια ετικέτα <tbody>
και να χρησιμοποιήσετε .append
, αντί για .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Μπορείτε να χρησιμοποιήσετε αυτή τη σπουδαία συνάρτηση jQuery add table row. Λειτουργεί εξαιρετικά με πίνακες που έχουν <tbody>
και που δεν έχουν. Επίσης, λαμβάνει υπόψη το colspan της τελευταίας γραμμής του πίνακα σας.
Ακολουθεί ένα παράδειγμα χρήσης:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));