javascript - dinamica - tabella php




Aggiungi la riga della tabella in jQuery (20)

Come ho anche avuto modo di aggiungere una riga alla fine o un posto specifico, quindi penso che dovrei anche condividere questo:

Prima trova la lunghezza o le righe:

var r=$("#content_table").length;

e quindi utilizzare sotto il codice per aggiungere la riga:

$("#table_id").eq(r-1).after(row_html);

Qual è il metodo migliore in jQuery per aggiungere una riga aggiuntiva a un tavolo come ultima riga?

È accettabile?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Esistono limitazioni a ciò che è possibile aggiungere a una tabella come questa (come input, select, numero di righe)?


E se tu avessi un <tbody> e un <tfoot> ?

Ad esempio:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Quindi inserirà la nuova riga nel piè di pagina, non nel corpo.

Quindi la soluzione migliore è includere un tag <tbody> e usare .append , piuttosto che .after .

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Ho trovato questo plugin AddRow abbastanza utile per la gestione delle righe della tabella. Tuttavia, la solution di Luke sarebbe la solution migliore se hai solo bisogno di aggiungere una nuova riga.


I Indovina che ho fatto nel mio progetto, eccolo qui:

html

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

L'approccio che suggerisci non è garantito per darti il ​​risultato che stai cercando - e se tu avessi un tbody per esempio:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Si finirebbe con il seguente:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Pertanto raccomanderei questo approccio:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Puoi includere qualsiasi cosa nel metodo after() a condizione che sia HTML valido, incluse più righe come nell'esempio sopra.

Aggiornamento: rivisitazione di questa risposta dopo l'attività recente con questa domanda. l'assenza di palpebre fa un buon commento sul fatto che ci sarà sempre un tbody nel DOM; questo è vero, ma solo se c'è almeno una riga. Se non hai file, non ci saranno persone se non ne hai specificato uno tu.

DaRKoN_ suggests accodarsi al corpo piuttosto che aggiungere contenuto dopo l'ultima tr . Questo aggira il problema di non avere righe, ma non è ancora a prova di proiettile perché teoricamente potrebbero avere più elementi tbody e la riga verrebbe aggiunta a ciascuno di essi.

Considerando tutto sommato, non sono sicuro che esista un'unica soluzione a una linea che conti per ogni singolo scenario possibile. Dovrai assicurarti che il codice jQuery corrisponda al tuo markup.

Penso che la soluzione più sicura sia probabilmente quella di garantire che la tua table includa sempre almeno una tbody nel tuo markup, anche se non ha righe. Su questa base, puoi usare quanto segue che funzionerà su molte righe che hai (e anche per tenere conto di più elementi tbody ):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

L'ho risolto in questo modo che penso sia il più leggibile :)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

Per aggiungere un buon esempio sull'argomento, ecco una soluzione funzionante se è necessario aggiungere una riga in una posizione specifica.

La riga aggiuntiva viene aggiunta dopo la quinta riga o alla fine della tabella se ci sono meno di 5 righe.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

Metto il contenuto su un contenitore (nascosto) pronto sotto la tabella .. quindi se tu (o il designer) devi cambiarlo non è necessario modificare il JS.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

Per la migliore soluzione pubblicata qui, se c'è una tabella annidata nell'ultima riga, la nuova riga verrà aggiunta alla tabella nidificata invece della tabella principale. Una soluzione rapida (considerando tabelle con / senza tbody e tabelle con tabelle nidificate):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Esempio di utilizzo:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

Questa è la mia soluzione

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

Questo può essere fatto facilmente usando la funzione "last ()" di jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

Se stai usando il plugin Datatable JQuery puoi provare.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Fare riferimento a Datatables fnAddData Datatables API


Secondo me il modo più veloce e chiaro è

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

ecco la demo Fiddle

Inoltre posso consigliare una piccola funzione per apportare più modifiche HTML

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Se usi il mio compositore d'archi puoi farlo

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Ecco la demo Fiddle


Stavo avendo alcuni problemi correlati, cercando di inserire una riga della tabella dopo la riga cliccata. Tutto va bene, tranne che la chiamata .after () non funziona per l'ultima riga.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

Sono atterrato con una soluzione molto disordinata:

crea la tabella come segue (id per ogni riga):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

eccetera ...

e poi :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

Sto usando in questo modo quando non ci sono righe nella tabella, e ogni riga è piuttosto complicata.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

jQuery ha una funzione integrata per manipolare gli elementi DOM al volo.

Puoi aggiungere qualsiasi cosa alla tua tabella in questo modo:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

La cosa $('<some-tag>') in jQuery è un oggetto tag che può avere diversi attributi attr che possono essere impostati e ottenere, così come il text , che rappresenta il testo tra il tag qui: <tag>text</tag> .

Questo è un rientro piuttosto strano, ma è più facile per te vedere cosa sta succedendo in questo esempio.


se hai un'altra variabile puoi accedere in <td> tag come quella prova.

In questo modo spero che sarebbe utile

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

La risposta di Neil è di gran lunga la migliore. Comunque le cose si complicano molto velocemente. Il mio suggerimento sarebbe di usare le variabili per memorizzare gli elementi e aggiungerli alla gerarchia DOM.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Scrivi con una funzione javascript

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

È possibile memorizzare nella cache la variabile footer e ridurre l'accesso al DOM (Nota: potrebbe essere preferibile utilizzare una riga falsa invece del piè di pagina).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")




html-table