javascript - Jquery-从 HTML 表创建 JavaScript 对象

Question

我尝试从表中创建 js obj。就像下面一样，我想要一个使用 jquery 形成的 json 对象。

第一行 tr 应被视为标题，其余的 tr 应被视为正文。顺序应为表 tr 的行索引。

<table class='table-out'>
   <tr class='header'>
          <td>title</td>
          <td>name</td>
          <td>address</td>
   </tr>
   <tr>
          <td>Mr.</td>
          <td>John Doe</td>
          <td>St. Michael Rd.</td>
   </tr>
   <tr>
          <td>Mr.</td>
          <td>Daniel Kautman</td>
          <td>St. Michael Rd.</td>
   </tr>
</table>

我需要的 JSON 对象:

tableObj =
[
     head:
        {
           txttitle: title,
           txtName: Name,
           txtAddrs: Address,
           order: 1
        }
     body:
        [{
            txttitle: Mr,
            txtName: John Doe,
            txtAddrs: St. Michael Rd
            order: 1
        },
        {
            txttitle: Mr,
            txtName: Mrak Doe,
            txtAddrs: 3 Z, Moyed Park
            order: 2
        },
        {
            txttitle: Mr,
            txtName: Meghan Slattery,
            txtAddrs: address here
            order: 3
        }]
]

我尝试过的事情-

$('.table-out>tbody>tr').each(function (index, elem){
  if($(this).hasClass(header)){
    ......
  }else{
    ......
 }
});

Answer 1

你就快到了。获取每行的单元格并根据列索引获取文本。顺便说一句，您的 tableObj 需要是一个对象，而不是一个数组。

例如

var tableObj = {
  head: {},
  body: []
};

$(".table-out tr").each(function(index, value) {
  var $cols = $(this).children("td");

  var item = {
    txttitle: $cols.eq(0).text(),
    txtName: $cols.eq(1).text(),
    txtAddrs: $cols.eq(2).text()
  };

  if ($(this).hasClass("header")) {
    item.order = 1;
    tableObj.head = item;
  } else {
    item.order = index;
    tableObj.body.push(item);
  }

});

console.log(tableObj);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table-out'>
  <tr class='header'>
    <td>title</td>
    <td>name</td>
    <td>address</td>
  </tr>
  <tr>
    <td>Mr.</td>
    <td>John Doe</td>
    <td>St. Michael Rd.</td>
  </tr>
  <tr>
    <td>Mr.</td>
    <td>Daniel Kautman</td>
    <td>St. Michael Rd.</td>
  </tr>
</table>