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

我有这张桌子：

<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>

---

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

实现起来有点棘手，因为您不直接访问表中的行和列，尤其是您希望对行和列进行分组的方式，但借助一些算法魔法和数学的强大功能，我成功地实现了它

这里是一个工作示例，其中我打印行和列数据，并且在您尝试使用

column_data

作为键，

row_data

作为列表中的值时，我还构建了一个自定义对象，具体取决于每列有多少行

$（'#saveTable'）。在（“单击”，函数（）{
var colCounter=$（“.column_data”）.length；
var rowCounter=$（“.row_data”）.length；
var customObject={}；
对于（变量i=0；i'）；
$（“.table striped tbody tr”）.append（“”）；
$（文档）。查找（“第四个输入”）。每个（函数（）{
$（this）.addClass（“列_数据”）；
});
$（“.table striped tbody tr td input”）。每个（函数（）{
$（this）.addClass（“行数据”）；
});
});
$（文档）。在（“单击“，”.removeRow”，函数（）上{
$（this.parent（）.parent（））
$（this.parent（）.parent（）.remove（）；
});
$（document）.on（“click”、“.removeColumn”上的函数（）{
var index=$（this.parent（）.index（）+1；
$（this）.closest（“table”）.find（“td:n子项（“+index+”））.remove（）；
$（this.parent（）.remove（）；
});


插入您的数据
添加列
添加行
保存表

删除列


删除行
您的算法错误。当前的实现将只列出行的所有数据N次，其中N是您拥有的列数。我假设您想先打印列数据（标题），然后只打印行，但对于该列？@N.Ivanov确切地说，这正是我试图实现的目标。从我的头顶上看，您可能希望使用每个
元素的
索引，因此您必须更改算法（第二个循环从哪里开始），而是查看每个
，但根据当前列只选择适当的
。希望这有帮助@伊万诺夫一个带有代码的答案会对你有更大的帮助…我已经添加了一个答案，我相信它解决了你的问题。希望这有帮助！非常感谢，昨天到达那里，现在我要做的是实现表的克隆，以便创建一个新表
$('#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");
   });
 });
});