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 中练习了一些简单的东西，在这种情况下，通过一个按钮向表中添加新行，为此我有两个代码片段：

第一个使用jquery选择器tbody:last-child和函数。append()

$("#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