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

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

您可以遍历每一行并添加如下属性：

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

function ObjectTemplate(title, name, address) {
    this.txttitle = title;
    this.txtName = name;
    this.txtAddrs = address;
}

$(".table-out tbody tr").each(function(rowIndex, row) {
    var title, name, address, bodyObj;
    if (row.className == "header") {
        bodyObj = true;
    } else {
        bodyObj = false;
    }
    $(row + " td").each(function(index, cell) {
        switch (index) {
            case 0:
                title = cell.text();
            case 1:
                name = cell.text();
            case 2:
                address = cell.text();
        }
    });
    var newObject = new ObjectTemplate(title, name, address);
    if (bodyObj) {
        tableObj[body].push(newObject);
    } else {
        tableObj[head] = newObject;
    }
});

Answer 2

您快到了。获取每一行的单元格，然后根据列索引获取文本。您的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>

Answer 3

尽管，在所需的输出中，您显示了带有不正确语法的字符串键的JSON数组。我希望这是拼写错误，并且您想要一个JSON对象。

是的，您使用jQuery .each遍历tr的方式正确。以下带有辅助函数来解析tr的代码应该可以完成工作：

function parseTr(tr) {
  const keyMap = ['txttitle', 'txtName', 'txtAddrs'];
  let trObj = {};
  tr.find('td').each(function(i, td) {
    trObj[keyMap[i]] = $(this).text();
  });
  return trObj;
}

let tableObj = { 'head': {}, 'body': [] };
$(document).ready(function() {
  $('.table-out tr').each(function(i, tr) {
     if($(this).hasClass('header')) {
       tableObj['head'] = parseTr($(this));
       tableObj['head']['order'] = i;
     } else {
       let parsedTr = parseTr($(this));
       parsedTr['order'] = i;
       tableObj['body'].push(parsedTr);
     }
  });
  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>

您应该将JavaScript对象视为控制台输出，但是，如果您想要JSON字符串，则可以在该对象上使用JSON.stringify：

JSON.stringify(tableObj);

Answer 4

请添加class或一些attr，以便您的数据保持安全

这是实时演示https://jsfiddle.net/shoesheill/od8ry0nc/47/

<table class='table-out'>
   <tr class='header'>
          <td class="title">title</td>
          <td class="name">name</td>
          <td class="address">address</td>
   </tr>
   <tr>
          <td class="title">Mr.</td>
          <td class="name">John Doe</td>
          <td class="address">St. Michael Rd.</td>
   </tr>
   <tr>
          <td class="title">Mr.</td>
          <td class="name">Daniel Kautman</td>
          <td class="address">St. Michael Rd.</td>
   </tr>
</table>
var tableObj = {
    head: {},
    body: []
}

$('tr:not(".header")').each(function(i,v) {
var $this=$(this);
    var body = { 
       txttitle: $this.find('.title').text(), 
       txtName:$this.find('.name').text(),
       txtAddrs: $this.find('.address').text(),
       order:Number(i+1)
   };
   tableObj.body.push(body);
});

$('tr[class="header"]').each(function(i,v) {
var $this=$(this);
     tableObj.head = { 
       txttitle: $this.find('.title').text(), 
       txtName:$this.find('.name').text(),
       txtAddrs: $this.find('.address').text(),
       order:Number(i+1)
   };
});

console.log(tableObj);

Answer 5

尝试不要对其进行硬编码，无论您将其放在标题中的什么，都会被使用：

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

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

console.log(tableObj);

function construct_header(thisObj){
   $(thisObj).find("td").each(function (index, elem){
      tableObj.head[$(this).text()]=$(this).text();
   });
   tableObj.head.order=1;
}

function append_body(thisObj){
   var row = [],colno=0;
   order_number++;
   var fields = $(thisObj).find("td");
   Object.keys(tableObj.head).forEach(function(key_){
      var field = {};
      if(key_=="order"){
        field[key_] = order_number;
      }else{
        field[key_] = $(fields[colno]).text();
      }
      row.push(field);
      colno++;
   });

   tableObj.body.push(row);
}

jQuery-从HTML表创建JavaScript对象

5 个答案: