代码之家 › 专栏 › 技术社区 › Kurkula

Jquery将表行值推送到Json对象

html jquery

Kurkula · 技术社区 · 8 年前

我正在尝试循环HTML表中的每一行,并使用相应的行名将每一行信息添加到JSON对象中。行详细信息将包含每个列的数据。我正试图获得如下json

var TemplateData = {
   rowName : '',
   rowDetails: [
      {columnHeader: columnValue,....}
   ]
}

我试过下面的我错过了什么?

我的小提琴是 here

<table border=1 id="battery">
  <tr>
    <th>RowName</th>
    <th>ColName1</th>
    <th>ColName2</th>
  </tr>
  <tr>
    <td id='name'>
      My Name 1
    </td>
    <td id='col1'>test row 1 col 1</td>
    <td id='col2'>test row 1 col 2</td>
  </tr>
  <tr>
    <td id='name'>
      My Name 2
    </td>
    <td id='col1'>test row 2 col 1</td>
    <td id='col2'>test row 2 col 2</td>
  </tr>
</table>

  $(document).ready(function() {
    var TemplateData = {
      templateName: 'Template 123',
      tableInfo: [{
        Name: '',
        rowDetails: [

        ]
      }]
    }

    $('#battery tr').each(function(i, row) {
      var rowsName = $(this).find('#name').text();
      var col1 = $(this).find('#col1').text();
      var col2 = $(this).find('#col2').text();

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "name",
        value: rowsName
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col1",
        value: col1
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col2",
        value: col2
      })
    });

    console.log(TemplateData);
  });

这里的两行列信息在同一行详细信息下。我正试图将它们分为两个rowDetails数组。

1 回复 | 直到 8 年前

polkattt 8 年前

自从我做了jquery以来已经有一段时间了,但是看起来会很有趣。试一试,看看这是不是你想要的。我建议加上 thead 和 tbody 给你加分。可能更容易遍历和解析。

$(() => {
  const ROW_NAME_KEY = 'name';

  const TemplateData = {
    templateName: 'Template 123',
    tableInfo: []
  };

  const formatMe = ($el) => $el.text().trim();

  const $rows = $('#battery').find('tr'),
    headers = $rows.splice(0, 1); // header rows

  // iterate rows to get the table info
  $rows.each((i, row) => {
    const $cols = $(row).find('td');
    let tpl = {
      Name: '',
      rowDetails: []
    };

    // within each row, lets get the name and the details
    $cols.each((i, col) => {
      const $col = $(col);

      if ($col.prop('id') == ROW_NAME_KEY) {
        tpl['Name'] = formatMe($col);
        return;
      }

      tpl['rowDetails'].push(formatMe($col));
    });

    TemplateData['tableInfo'].push(tpl);
  });

  console.log(TemplateData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 id='battery'>
  <tr>
    <th>RowName</th>
    <th>ColName1</th>
    <th>ColName2</th>
  </tr>
  <tr>
    <td id='name'>
      My Name 1
    </td>
    <td id='col1'>test row 1 col 1</td>
    <td id='col2'>test row 1 col 2</td>
  </tr>
  <tr>
    <td id='name'>
      My Name 2
    </td>
    <td id='col1'>test row 2 col 1</td>
    <td id='col2'>test row 2 col 2</td>
  </tr>
</table>