在 HTML 表格中显示 JSON 并添加行

Question

我正在寻找一些伪代码来帮助我制定策略。这是我想要做的：

我收到一个 JSON 对象，其中的数据显示在 HTML 表中。有时我使用 $each，有时我使用 for 循环。有很多方法可以做到这一点。假设它是一个包含 IP、MAC 和名称列的表。 JSON 看起来像这样：

[{"mode": "ftp"},{"IP": "123.123"},{"MAC": "445566"}]

但是，当我需要为用户创建一个新行以输入 IP、MAC 和名称的新数据时，我会重复自己并创建一个创建新行的函数 - 它会创建一个新的 <tr> 和 @ 987654323@ 对于每个值等。由于我的表格由静态文本字段和每个旁边的隐藏输入组成（单击“编辑”按钮时的切换可见性），所以我的代码中有两次应用。

有没有一种优雅的方法可以用更少的代码做到这一点 - 我在想而不是直接在表中显示数据，我创建了一个名为 addRow 的函数，它的参数是每一行的数据，然后页面可以最初为每一行调用该函数，并在我创建新行时再次调用。

一些伪代码就可以了，我可以填补空白，我只是想知道是否有另一种方法来解决这个问题，或者这种事情是否有流行的 Javascript 模式。

编辑：我使用第三方插件的请求未获批准。我知道 DataTables 很棒，但是对于这个，我只能靠我自己了！

Answer 1

我会选择https://datatables.net（MIT 许可证）

它非常“优雅”且快速，允许您使用 json 数据初始化表。它还具有易于使用的添加行/内联编辑功能。

• Json 初始化：

https://www.datatables.net/examples/data_sources/ajax.html

• 添加行：

https://datatables.net/examples/api/add_row.html

• 内联编辑：

https://editor.datatables.net/examples/inline-editing/simple

Answer 2

我认为您的最初想法是正确的，即创建一个 addRow 函数并调用它。但是，请记住，您希望尽可能少地编辑 DOM，因为每个 append 或 insert 通常都会导致重绘......所以，也许不是 addRow，对我们来说更好addRows 函数将允许您一次追加多行。您最初可以使用您的数据行调用它来执行单个附加。然后，当您只添加一行时，只需编辑您的数据，使其成为长度为 1 的数组。也就是说，将它传递给[rowData]（添加括号以使外层成为长度为一的数组），而不仅仅是rowData。

也就是说，

  // Create the table element and add the headers.
  function createTableAddHeaders(){
    // however you want to do it.
  }

  // Each element of 'rowsToAppend' will be transformed into
  // a table row. Append rows is agnostic as to whether
  // the input rows already exist in the table. 
  // It will just keep appending the input to the table
  function appendRows(rowsToAppend){
    // code to append input 'rowsToAppend'to the tableElem 
  }

  // Example Call ----------------------------
  // This is the data we will use to create the original table
  var originalRows = [
    ["Row Number", "id1", "id2", "id3"], // Header
    ["Row 1", 1,2,3], // data
    ["Row 2", 4,5,6]  // data
  ];

  createTableAddHeaders();  // Create table
  appendRows(originalRows); // Append original data to the table


  // Now we have new data we want to append.
  var newRow = ["Row 3: New Row", 7, 8, 9];
  // Wrap it in a [] when calling appendRows so the
  // outer layer becomes an array of length one
  appendRows([newRow]);