Question

我有一个构建动态表的工具：

<div class="container">
  <div class="row">
    <div class="col">
      <hr>
      <h3>Insert your data</h3>
      <button id="addTd" type="button" class="btn btn-primary">
        Add Column
      </button>
      <button id="addTr" type="button" class="btn btn-primary">
        Add Row
      </button>
      <button type="button" class="btn btn-danger" id="saveTable">Save table</button>
      <hr>
     <div class="table-responsive">
      <table id="table-data" class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th></th>
            <th>
              <button type="button" class="btn btn-primary removeColumn btn-block">Delete column</button>
              <br>
              <input class="form-control column_data" type="text" autofocus placeholder="Title" name="Name"  value="Hello">
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="tr_clone">
            <td><button type="button" class="btn btn-primary removeRow">Delete row</button></td>
            <td><input class="form-control row_data" type="text" autofocus placeholder="data" name="who" value="Bye"></td>
          </tr>
        </tbody>
      </table>
     </div>
    </div>
  </div>
 </div>
<div class="container">
  <div class="row">
    <div class="col">
      <h2>
        Rebuild table
      </h2>
      <table class="table table-bordered">
        <thead>
          <tr></tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
 </div>

当我点击保存时，它会生成一个json并重建表：

$('#saveTable').on("click", function() {

   var results={};
   $('thead input').each(function(){
    results[$(this).val()] = [];
   });

   var resultsKeys = Object.keys(results);

   $('tbody input').each(function(){
    var colIndex = $(this).parent().index();

    var rowIndex = $(this).closest('tr').index();

    results[resultsKeys[colIndex-1]].push($(this).val());
   });


   rebuild(results);

});

function rebuild(results) {
  var data = "[" + JSON.stringify(results) +"]";
  console.log(data);

  data.forEach(obj => {
    Object.keys(obj).forEach(key => {
      $('thead').append($('<th>').text(key));

      obj[key].forEach((e, i) => {
        if(!$("tbody tr:eq("+i+")").length) $("<tr>").appendTo($("tbody"));
        $("tbody tr:eq(" + i + ")").append($('<td>').text(e))
      })
    })
  });
}

    $('#table-data input').on("change", function() {
      $(this).attr("value", $(this).attr("value"));
    });

    $(".table-striped tbody tr th input").each(function(){
      $(this).addClass("column_data");
    });

    $("#addTr").on('click', function() {
      var $tr    = $('tbody tr.tr_clone');
      var $clone = $tr.clone();
      $clone.find(':text').val('');
      $tr.after($clone);
      $(".table-striped tbody tr td input").each(function(){
        $(this).addClass("row_data");
      });
    });

    $("#addTd").on("click", function(){
      $(".table-striped thead tr").append('<th><button type="button" class="btn btn-primary removeColumn btn-block">Delete column</button><br><input class="form-control" type="text" autofocus placeholder="Title" name="Name"></th>');
      $(".table-striped tbody tr").append('</td> <td><input type="text" placeholder="data" name="datepicker_end" class="form-control"></td>');
      $(document).find("thead th input").each(function(){
        $(this).addClass("column_data");
      });
      $(".table-striped tbody tr td input").each(function(){
        $(this).addClass("row_data");
      });
    });

        $(document).on("click", ".removeRow", function(){
     $(this).parent().parent()
      $(this).parent().parent().remove();
    });

    $(document).on("click", ".removeColumn", function(){
      var index = $(this).parent().index() + 1;
      $(this).closest("table").find("td:nth-child(" + index + ")").remove();
      $(this).parent().remove();
    });

但是那给了我：

未捕获的TypeError：data.forEach不是函数

jsFiddle playground

Answer 1

问题在于数据是字符串而不是数组。

Use data = JSON.parse(data);

无效的json stringify

1 个答案: