Jquery-从HTML表创建JavaScript对象

我尝试创建js obj表格。如下面所示，我需要一个json对象，使用jquery对其进行格式化

第一行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>

我喜欢的东西-

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

---

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

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;
    }
});

---

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

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;
    }
});

---

你快到了。获取每行的单元格，并根据列索引获取文本。您的

tableObj

需要是对象，而不是数组

e、 g

var tableObj={
头：{}，
正文：[]
};
$（“.table out tr”）。每个（函数（索引、值）{
var$cols=$（this.children（“td”）；
变量项={
txttitle:$cols.eq（0.text（），
txtName:$cols.eq（1.text（），
txtAddrs:$cols.eq（2）.text（）
};
if（$（this）.hasClass（“头”））{
item.order=1；
tableObj.head=项目；
}否则{
item.order=索引；
tableObj.主体推送（项目）；
}
});
控制台日志（tableObj）

标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
你就快到了。获取每行的单元格，并根据列索引获取文本。您的
tableObj
需要是对象，而不是数组

e、 g


var tableObj={
头：{}，
正文：[]
};
$（“.table out tr”）。每个（函数（索引、值）{
var$cols=$（this.children（“td”）；
变量项={
txttitle:$cols.eq（0.text（），
txtName:$cols.eq（1.text（），
txtAddrs:$cols.eq（2）.text（）
};
if（$（this）.hasClass（“头”））{
item.order=1；
tableObj.head=项目；
}否则{
item.order=索引；
tableObj.主体推送（项目）；
}
});
控制台日志（tableObj）

标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
但是，在您想要的输出中，您已经显示了带有字符串键的JSON数组，这是不正确的语法。我希望这是打字错误，您需要一个JSON对象

是的，使用jQuery迭代
tr
是正确的。
下面是一个用于解析
tr
的辅助函数：


函数parseTr（tr）{
const keyMap=['txtitle'，'txtName'，'txtAddrs']；
设trObj={}；
tr.find（'td'）。每个（函数（i，td）{
trObj[keyMap[i]=$（this.text（）；
});
返回trObj；
}
设tableObj={'head'：{}，'body'：[]}；
$（文档）.ready（函数（）{
$（'.table out tr'）。每个（函数（i，tr）{
if（$（this）.hasClass（'header'））{
tableObj['head']=parseTr（$（this））；
tableObj['head']['order']=i；
}否则{
让parsedTr=parseTr（$（this））；
parsedTr['order']=i；
tableObj['body'].push（解析的dtr）；
}
});
控制台日志（tableObj）；
});

标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
但是，在您想要的输出中，您已经显示了带有字符串键的JSON数组，这是不正确的语法。我希望这是打字错误，您需要一个JSON对象

是的，使用jQuery迭代
tr
是正确的。
下面是一个用于解析
tr
的辅助函数：


函数parseTr（tr）{
const keyMap=['txtitle'，'txtName'，'txtAddrs']；
设trObj={}；
tr.find（'td'）。每个（函数（i，td）{
trObj[keyMap[i]=$（this.text（）；
});
返回trObj；
}
设tableObj={'head'：{}，'body'：[]}；
$（文档）.ready（函数（）{
$（'.table out tr'）。每个（函数（i，tr）{
if（$（this）.hasClass（'header'））{
tableObj['head']=parseTr（$（this））；
tableObj['head']['order']=i；
}否则{
让parsedTr=parseTr（$（this））；
parsedTr['order']=i；
tableObj['body'].push（解析的dtr）；
}
});
控制台日志（tableObj）；
});

标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
请添加
类
或一些
属性
，以便您的数据保持安全

这是现场演示


标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
变量tableObj={
头：{}，
正文：[]
}
$（'tr:not（“.header”）。每个（函数（i，v）{
var$this=$（this）；
变量体={
txttitle:$this.find（'.title'）.text（），
txtName:$this.find（'.name'）.text（），
txtAddrs:$this.find（'.address'）.text（），
订单：编号（i+1）
};
tableObj.body.push（body）；
});
$（'tr[class=“header”]”）。每个（函数（i，v）{
var$this=$（this）；
tableObj.head={
txttitle:$this.find（'.title'）.text（），
txtName:$this.find（'.name'）.text（），
txtAddrs:$this.find（'.address'）.text（），
订单：编号（i+1）
};
});
控制台日志（tableObj）；
请添加
类
或一些
属性
，以便您的数据保持安全

这是现场演示


标题
名称
地址
先生
无名氏
圣迈克尔路。
先生
丹尼尔·考特曼
圣迈克尔路。
变量tableObj={
头：{}，
正文：[]
}
$（'tr:not（“.header”）。每个（函数（i，v）{
var$this=$（this）；
变量体={
txttitle:$this.find（'.title'）.text（），
txtName:$this.find（'.name'）.text（），
txtAddrs:$this.find（'.address'）.text（），
订单：编号（i+1）
};
tableObj.body.push（body）；
});
$（'tr[class=“header”]”）。每个（函数（i，v）{
var$this=$（this）；
tableObj.head={
txttitle:$this.find（'.title'）.text（），
txtNa
<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);

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);
}