javascript - una - Añadir fila de tabla en jQuery




eliminar todas las filas de una tabla jquery (20)

¿Qué <tbody> si tienes un <tbody> y un <tfoot> ?

Como:

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

Luego insertaría su nueva fila en el pie de página, no en el cuerpo.

Por lo tanto, la mejor solución es incluir una etiqueta <tbody> y usar .append , en lugar de .after .

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

https://code.i-harness.com

¿Cuál es el mejor método en jQuery para agregar una fila adicional a una tabla como la última fila?

¿Es esto aceptable?

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

¿Existen limitaciones para lo que puede agregar a una tabla como esta (como entradas, selecciones, número de filas)?


Aquí hay un código hackping hacketi. Quería mantener una plantilla de fila en una página HTML . Las filas de la tabla 0 ... n se representan en el momento de la solicitud, y este ejemplo tiene una fila codificada y una fila de plantilla simplificada. La tabla de plantillas está oculta, y la etiqueta de la fila debe estar dentro de una tabla válida o los navegadores pueden DOM árbol DOM . Al agregar una fila se usa el contador + 1 identificador, y el valor actual se mantiene en el atributo de datos. Garantiza que cada fila tenga parámetros de URL únicos.

He ejecutado pruebas en Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (con Symbian 3), Android and Firefox y navegadores beta.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PD: doy todos los créditos al equipo de jQuery; se lo merecen todo. Programación de JavaScript sin jQuery: ni siquiera quiero pensar en esa pesadilla.


Como también tengo una manera de agregar filas por fin o cualquier lugar específico, creo que también debería compartir esto:

Primero averigua la longitud o las filas:

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

y luego use el siguiente código para agregar su fila:

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

De una manera sencilla:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

Encontré este complemento AddRow bastante útil para administrar filas de tablas. Sin embargo, la solution de Luke sería la mejor opción si solo necesita agregar una nueva fila.


Esta es mi solucion

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

Lo estoy usando de esta manera cuando no hay ninguna fila en la tabla, así como, cada fila es bastante complicada.

style.css:

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

xxx.html

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

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

...

Lo resolví de esta manera que creo que es el más legible :)

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

No está garantizado que el enfoque que sugiera le dé el resultado que está buscando, por ejemplo, si tuviera un tbody :

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

Usted terminaría con lo siguiente:

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

Por lo tanto, recomendaría este enfoque en su lugar:

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

Puede incluir cualquier cosa dentro del método after() siempre que sea un HTML válido, incluidas varias filas como se muestra en el ejemplo anterior.

Actualización: revisando esta respuesta luego de una actividad reciente con esta pregunta. la falta de párpado hace un buen comentario de que siempre habrá un tbody en el DOM; Esto es cierto, pero solo si hay al menos una fila. Si no tiene filas, no habrá tbody menos que usted mismo haya especificado una.

DaRKoN_ suggests agregar al cuerpo en lugar de agregar contenido después del último tr . Esto evita el problema de no tener filas, pero aún así no es a prueba de balas, ya que teóricamente podría tener varios elementos tbody y la fila se agregaría a cada uno de ellos.

Sopesando todo, no estoy seguro de que haya una única solución de una línea que justifique todos los escenarios posibles. Deberá asegurarse de que el código jQuery coincida con su marca.

Creo que la solución más segura es probablemente garantizar que su table siempre incluya al menos un tbody en su marca, incluso si no tiene filas. Sobre esta base, puede usar lo siguiente, que funcionará sin importar cuántas filas tenga (y también tendrá en cuenta varios elementos de tbody ):

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

Para agregar un buen ejemplo sobre el tema, aquí está la solución de trabajo si necesita agregar una fila en una posición específica.

La fila adicional se agrega después de la quinta fila, o al final de la tabla si hay menos de 5 filas.

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);
}

Pongo el contenido en un contenedor listo (oculto) debajo de la tabla ... así que si usted (o el diseñador) tiene que cambiarlo, no es necesario editar el JS.

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

Puede usar esta gran función jQuery add table row . Funciona muy bien con tablas que tienen <tbody> y que no. También toma en consideración el colspan de su última fila de la tabla.

Aquí hay un ejemplo de uso:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

Sé que has pedido un método jQuery. Miré mucho y descubrí que podemos hacerlo de una manera mejor que usando JavaScript directamente mediante la siguiente función.

tableObject.insertRow(index)

index es un número entero que especifica la posición de la fila a insertar (comienza en 0). El valor de -1 también se puede utilizar; lo que resulta en que la nueva fila se insertará en la última posición.

Este parámetro es obligatorio en Firefox y Opera , pero es opcional en Internet Explorer, Chrome y Safari .

Si se omite este parámetro, insertRow() inserta una nueva fila en la última posición en Internet Explorer y en la primera posición en Chrome y Safari.

Funcionará para todas las estructuras aceptables de la tabla HTML.

El siguiente ejemplo insertará una fila en el último (-1 se usa como índice):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Espero que ayude.


Si tiene otra variable a la que puede acceder en la etiqueta <td> intente.

De esta manera espero que sea de ayuda.

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);

Supongo que lo he hecho en mi proyecto, aquí está:

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');
    });
      });
});

jQuery tiene una función incorporada para manipular elementos DOM sobre la marcha.

Puedes agregar cualquier cosa a tu mesa de esta manera:

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

La cosa $('<some-tag>') en jQuery es un objeto de etiqueta que puede tener varios atributos attr que se pueden establecer y obtener, así como text , que representa el texto entre la etiqueta aquí: <tag>text</tag> .

Esta es una sangría bastante extraña, pero es más fácil para ti ver lo que está pasando en este ejemplo.


yo recomiendo

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

Opuesto a

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

Las first y last palabras clave funcionan en la primera o la última etiqueta que se inicia, no se cierra. Por lo tanto, esto funciona mejor con tablas anidadas, si no desea que se cambie la tabla anidada, sino que se agregue a la tabla general. Al menos, esto es lo que encontré.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

La respuesta de Neil es, con mucho, la mejor. Sin embargo las cosas se ensucian muy rápido. Mi sugerencia sería utilizar variables para almacenar elementos y agregarlos a la jerarquía 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>

Escribir con una función javascript.

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

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

Puede almacenar en caché la variable de pie de página y reducir el acceso a DOM (Nota: puede ser que sea mejor usar una fila falsa en lugar de pie de página).

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




html-table