Question

我正在寻找一些伪代码来帮助我制定策略。这是我正在尝试做的事情：

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

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

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

有没有一种优雅的方法可以在更少的代码中执行此操作 - 我正在思考而不是直接在表中显示数据，我创建了一个名为addRow的函数，它的参数是每行的数据，那么页面就可以了最初为每一行调用该函数，并在创建新行时再次调用该函数。

一些伪代码会很好，我可以填空，我只是想知道是否有另一种方法可以解决这个问题，或者是否有一种流行的Javascript模式用于此类事情。

修改：我的使用第三方插件的请求未获批准。我知道DataTables很棒，但是对于这个，我是独立的！

Answer 1

我会选择https://datatables.net（麻省理工学院执照）

它非常“优雅”且快速，允许您使用json数据初始化表。它还易于使用addrow / inline编辑功能。

Json Init：

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

AddRow：

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

内联编辑：

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

Answer 2

我认为你正处于正确的轨道上，只是创建一个addRow函数并调用它。但是，请记住，您希望尽可能地将DOM编辑为litle，因为每个append或insert通常会导致重绘...因此，可能代替addRow，它对我们来说更好的是addRows函数，它允许您一次追加多行。您最初使用您的数据行调用它来执行单个追加。然后，当您只添加一行时，只需编辑您的数据，使其成为长度为1的数组。也就是说，传递它[rowData]（添加括号以使外层成为长度为1的数组）而不只是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]);

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

2 个答案: