Home / Questions / 25347
Accepted
Juan Pinzón
Asked: 2020-09-29 07:31:05 +0800 CST 2020-09-29 07:31:05 +0800 CST

добавить строку в таблицу html

  • 772

Я практиковал что-то простое в jquery, в данном случае добавляя новые строки в таблицу с помощью кнопки, для чего у меня есть два фрагмента кода:

Первый с использованием селектора tbody:last-childи функции append()jquery .

$("#add").on("click", function(){
  $('#test > tbody:last-child').append('<tr><td>'+$("#nombre").val()+'</td><td>'+$("#apellido").val()+'</td></tr>');
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Tabla</title>
</head>
<body>
  Nombre: <input type="text" id="nombre">
  Apellido: <input type="text" id="apellido">
  <button type="button" id="add">Agregar</button>
<table id="test">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Luis
      </td>
      <td>
        Paredes
      </td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>

А второй с помощью селектора tr:lastи функцииafter()

$("#add").on("click", function(){
  $('#test tr:last').after('<tr><td>'+$("#nombre").val()+'</td><td>'+$("#apellido").val()+'</td></tr>');
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  Nombre: <input type="text" id="nombre">
  Apellido: <input type="text" id="apellido">
  <button type="button" id="add">Agregar</button>
<table id="test">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Luis
      </td>
      <td>
        Paredes
      </td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>

Мой вопрос:

Есть ли другой способ сделать это, и какой из двух способов лучше реализован?

javascript

2 Answers

  1. Best Answer

    Да, есть много других способов сделать это, правда и при всем уважении, я думаю столько, сколько мы можем придумать и создать. На английском SO есть вопрос , который предлагает более 20 различных вариантов для этого.

    Какой из двух лучше реализован? Я думаю, что нет большой разницы, это просто два разных способа решения проблемы.

    С точки зрения исходного кода используемых методов разница между одним и другим должна быть минимальной с точки зрения производительности:

    append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
},


after: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
    } );
},

    Наконец, что касается реализации, которую вы делаете, селекторы можно было бы немного улучшить, в первом случае не нужно указывать, :last-childа во втором мы могли бы избежать использования селектора потомка и добавить tbody, если он есть <tfoot>в конце Таблица.

    $("#add").on("click", function(){
  $('#test > tbody').append('<tr><td>'+$("#nombre").val()+'</td><td>'+$("#apellido").val()+'</td></tr>');
});
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Tabla</title>
</head>
<body>
  Nombre: <input type="text" id="nombre">
  Apellido: <input type="text" id="apellido">
  <button type="button" id="add">Agregar</button>
<table id="test">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Luis
      </td>
      <td>
        Paredes
      </td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>

    $("#add").on("click", function(){
  $('#test > tbody > tr:last').after('<tr><td>'+$("#nombre").val()+'</td><td>'+$("#apellido").val()+'</td></tr>');
});
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  Nombre: <input type="text" id="nombre">
  Apellido: <input type="text" id="apellido">
  <button type="button" id="add">Agregar</button>
<table id="test">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Luis
      </td>
      <td>
        Paredes
      </td>
    </tr>
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>

    • 5

  2. Добавление к отличному ответу @Shaz:

    Какой из двух лучше реализован?

    Если вы имеете в виду реализацию в общих чертах, то нет. Избегайте использования такого кода, который нельзя использовать повторно, вместо этого вы можете использовать для него функции, которые служат шаблонами. Например, ваш код может быть модульным следующим образом:

    function addPerson(e) {
  e.preventDefault();
  const row = createRow({
    name: $('#name').val(),
    lastname: $('#lastname').val()
  });
  $('table tbody').append(row);
  clean();
}

function createRow(data) {
  return (
    `<tr>` +
      `<td>${$('tbody tr').length + 1}</td>` +
      `<td>${data.name}</td>` +
      `<td>${data.lastname}</td>` +
    `</tr>`
  );
}

function clean() {
  $('#name').val('');
  $('#lastname').val('');
  $('#name').focus();
}
    *,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding: 1rem;
  text-align: center;
}
form {
  display: inline-flex;
}
form input {
  border: 1px solid #ccc;
  color: #333;
  font-family: 'segoe ui';
  font-size: 14px;
  outline: none;
  padding: .4rem .8rem;
}
form button {
  background-color: #1abc9c;
  border: 1px solid #1abc9c;
  color: rgba(255,255,255,.93);
  font-family: 'segoe ui';
  margin-left: 10px;
  padding: .4rem 1rem;
  transition: background-color .2s ease,
    color .2s ease;
}
form button:hover {
  background-color: #ffF;
  color: #1abc9c;
}
table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-top: 25px;
}
table thead th {
  background-color: #f2f2f2;
  font-weight: 500;
}
table thead th,
table tbody td {
  color: #333;
  font-family: 'segoe ui';
  font-size: 14px;
  padding: .5rem .65rem;
}
table thead th:not(:last-of-type),
table tbody td:not(:last-of-type) {
  border-right: 1px solid #ccc;
}
table thead tr,
table tbody tr:not(:last-of-type) {
  border-bottom: 1px solid #ccc;
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <form onsubmit="addPerson(event)">
    <section class="group">
      <input type="text" id="name" placeholder="Nombre" />
      <input type="text" id="lastname" placeholder="Apellido" />
    </section>
    <button type="submit">Agregar</button>
  </form>
  
  <table style="display: inline-block">
    <thead>
      <tr>
        <th>#</th>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

    Что касается производительности между jQuery#appendи jQuery#after, то заметных различий нет.

    • 2