从表数据获取Javascript对象数组

时间:2018-07-01 17:31:30

标签: javascript jquery html

我可能是javascript新手,我想以json对象格式从表中提取数据 我的桌子看起来像这样

<table>
<thead>
<tr>
<th class="active">Bolumn</th>
<th class="active">Column</th>
<th class="active">Dolumn</th>
<th>Molumn</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">Bolumn Data</td>
<td class="active">Column Data</td>
<td class="active">Dolumn Data</td>
<td>Molumn Data</td>
</tr>
<tr>
<td class="active">Bolumn Data 1</td>
<td class="active">Column Data 1</td>
<td class="active">Dolumn Data 1</td>
 <td>Molumn Data 1</td>
</tr>
<tr>
<td class="active">Bolumn Data 2</td>
<td class="active">Column Data 2</td>
<td class="active">Dolumn Data 2</td>
<td>Molumn Data 2</td>
</tr>
</tbody>
</table>    

在表中,有些具有活动类,我只需要该活动类数据

所以我想要json格式的样子,我想要使用jquery方法

[{"Bolumn":"Bolumn Data","Column":"Column Data","Dolumn":"Dolumn Data"},
{"Bolumn":"Bolumn Data 1","Column":"Column Data 1","Dolumn":"Dolumn Data 1"},
{"Bolumn":"Bolumn Data 2","Column":"Column Data 2","Dolumn":"Dolumn Data 2"}]

预先感谢

已更新: 我已经尝试过像这样的代码,但是我不知道如何实现

var array = [];
$('tr').each(function (i) {
    $(this).find('td').each(function (i) {
        if ($(this).hasClass('active')) {
            array.push($(this).text());
        }
    });
});

2 个答案:

答案 0 :(得分:1)

您的代码已接近正常工作。它需要一些东西才能获得您想要的结果。首先,由于需要对象,因此需要在标题中找到的键。您可以像处理数据一样制作这些数组:

var headers = []
$('tr th').each(function (i) {
    headers.push($(this).text())
})

现在,您可以在循环中按索引引用标头,并在操作时为键分配值:

// find headers
var headers = []
$('tr th').each(function(i) {
  headers.push($(this).text())
})
// result array
var array = [];
$('tr').each(function(i) {
  // declare object variable but dont set it's value
  // unless there are objects to find
  var rowObj
  $(this).find('td').each(function(i) {
    if (!rowObj) rowObj = {}
    if ($(this).hasClass('active')) {
      // use the header we found earlier
      rowObj[headers[i]] = $(this).text()
    }
  });
  // if we found active objects, rowObje will be defined
  if (rowObj) array.push(rowObj)
});
console.log(array)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="active">Bolumn</th>
      <th class="active">Column</th>
      <th class="active">Dolumn</th>
      <th>Molumn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">Bolumn Data</td>
      <td class="active">Column Data</td>
      <td class="active">Dolumn Data</td>
      <td>Molumn Data</td>
    </tr>
    <tr>
      <td class="active">Bolumn Data 1</td>
      <td class="active">Column Data 1</td>
      <td class="active">Dolumn Data 1</td>
      <td>Molumn Data 1</td>
    </tr>
    <tr>
      <td class="active">Bolumn Data 2</td>
      <td class="active">Column Data 2</td>
      <td class="active">Dolumn Data 2</td>
      <td>Molumn Data 2</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:0)

作为jQuery解决方案的替代方法,这里有使用Array.prototype.mapArray.prototype.reduce的香草js和ES6。

学习这些内容将来会很有用,并将帮助您编写更多声明性代码。

// 1) extract headers and rows in separate arrays with 
//    respective `isActive` flag for each item in both

var [headers, ...rows] = [...document.querySelectorAll('tr')].map(
  tr =>  [...tr.querySelectorAll('*')].map(n => ({
  name: n.innerText,
  isActive: n.classList.contains('active')
})));

// 2) iterate over the `rows` and dynamically aggregate the output object 
//    by matching headers and rows based on their indexes:

var result = rows.map(row => {
  return headers.reduce((obj, h, j) => {
    if (h.isActive && row[j].isActive) {
      obj[h.name] = row[j].name;
    }
    return obj;
  }, {});
});
console.log(result);
<table>
  <thead>
    <tr>
      <th class="active">Bolumn</th>
      <th class="active">Column</th>
      <th class="active">Dolumn</th>
      <th>Molumn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="active">Bolumn Data</td>
      <td class="active">Column Data</td>
      <td class="active">Dolumn Data</td>
      <td>Molumn Data</td>
    </tr>
    <tr>
      <td class="active">Bolumn Data 1</td>
      <td class="active">Column Data 1</td>
      <td class="active">Dolumn Data 1</td>
      <td>Molumn Data 1</td>
    </tr>
    <tr>
      <td class="active">Bolumn Data 2</td>
      <td class="active">Column Data 2</td>
      <td class="active">Dolumn Data 2</td>
      <td>Molumn Data 2</td>
    </tr>
  </tbody>
</table>