javascript - 如何在控制台或 json 中输出具有正确列和行值的数据结构？

Question

我有这张表:

<button type="button" class="btn btn-danger" id="saveTable">Save table</button>

<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="Titolo">
    </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">
    </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="22"></td>
      <td><input type="text" placeholder="data" name="datepicker_end" class="form-control row_data"></td>
    </tr>
  </tbody>
</table>

当我单击保存按钮时，我想在 console.log 中输出，或者最好以 json 形式输出。我面临的问题是列和行不遵循正确的索引:

$('#saveTable').on("click", function() {
 $(".column_data").each(function(){
  var dataValue = $(this).val();
  console.log(dataValue + "\n");
   $(".row_data").each(function(){
    var dataValue = $(this).val();
    console.log(dataValue + "\n");
   });
 });
});

JsFiddle playground

Answer 1

我只是有一些空闲时间来看看并尝试实现我在评论中提到的内容。

实现起来有点棘手，因为您不能直接访问表的行和列，尤其是您想要对行和列进行分组的方式，但通过一些算法魔法和数学的力量，我成功地实现了让它工作。

这是一个工作示例，我打印行、列数据，并且还构建了一个自定义对象，就像您尝试的那样，其中 column_data 是键，row_data是列表中的值，具体取决于每列有多少行。

$('#saveTable').on("click", function() {
  var colCounter = $(".column_data").length;
  var rowCounter = $(".row_data").length;

  var customObject = {};

  for (var i = 0; i < colCounter; i++) {
    console.log("Col-data: " + $(".column_data").eq(i).val());
    customObject[$(".column_data").eq(i).val()] = [];
    for (var j = 0 + i; j < rowCounter; j += colCounter) {
      console.log("Row-data: " + $(".row_data").eq(j).val());
      customObject[$(".column_data").eq(i).val()].push($(".row_data").eq(j).val());
    }
  }
  console.log(customObject);
});

$('#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();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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="">
              </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=""></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

希望这会有所帮助!