js与jQuery实现获取table中的数据并拼成json字符串操作示例

下面是关于“js与jQuery实现获取table中的数据并拼成json字符串操作示例”的完整攻略。

1. 操作示例简介

在网站的业务中，经常需要从table中获取数据，并转化成JSON对象，便于传输数据或者进行数据处理。这里提供两种实现方式，分别是使用原生js和jQuery库。

2. 使用原生js获取数据并拼成json字符串

2.1. 获取table中数据

我们可以使用HTML DOM操作，通过获取table元素来操作。

var table = document.getElementById('tableId');
var rows = table.rows; //获取所有行

这里的tableId指的是需要获取数据的table元素的标识符。

2.2. 将获取到的数据存储到JSON对象中

我们可以通过循环遍历table中的每一行，将每行对应的数据存储到JSON对象中。

下面是实现的示例代码：

var jsonData = []; // 存储table数据的JSON对象
for (var i = 0; i < rows.length; i++) {
  var cols = rows[i].cells; //获取当前行的所有列
  var rowData = {}; //存储当前行数据的JSON对象
  for (var j = 0; j < cols.length; j++) {
    rowData[cols[j].getAttribute('name')] = cols[j].innerHTML;//设置当前行指定列的值
  }
  jsonData.push(rowData); //将当前行数据保存到JSON对象中
}

这里的name属性用来指定每一列数据对应的属性名。我们可以通过自定义name属性，方便地将数据统一存储到JSON对象中。

2.3. 将JSON对象转化为json字符串

最后，我们可以使用JSON.stringify()函数来将JSON对象转化为json字符串。下面是示例代码：

var jsonString = JSON.stringify(jsonData); //将JSON对象转化为json字符串

2.4. 完整代码示例

下面是完整的示例代码实现：

<table id="tableId">
  <thead>
    <tr>
      <th name="id">编号</th>
      <th name="name">姓名</th>
      <th name="age">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td name="id">1</td>
      <td name="name">张三</td>
      <td name="age">18</td>
    </tr>
    <tr>
      <td name="id">2</td>
      <td name="name">李四</td>
      <td name="age">20</td>
    </tr>
    <tr>
      <td name="id">3</td>
      <td name="name">王五</td>
      <td name="age">22</td>
    </tr>
  </tbody>
</table>

<script>
var table = document.getElementById('tableId');
var rows = table.rows; //获取所有行

var jsonData = []; // 存储table数据的JSON对象
for (var i = 0; i < rows.length; i++) {
  var cols = rows[i].cells; //获取当前行的所有列
  var rowData = {}; //存储当前行数据的JSON对象
  for (var j = 0; j < cols.length; j++) {
    rowData[cols[j].getAttribute('name')] = cols[j].innerHTML;//设置当前行指定列的值
  }
  jsonData.push(rowData); //将当前行数据保存到JSON对象中
}

var jsonString = JSON.stringify(jsonData); //将JSON对象转化为json字符串
console.log(jsonString);
</script>

3. 使用jQuery库获取数据并拼成json字符串

接下来我们将介绍使用jQuery库实现获取table中的数据并拼成json字符串的示例。

3.1. 获取table中数据

我们可以使用jQuery('table tr')方法来获取table中所有的行。

下面是示例代码：

var rows = jQuery('table tr');

3.2. 将获取到的数据存储到JSON对象中

同样，我们可以通过循环来遍历每一行数据，并将其存储到JSON对象中。

下面是示例代码：

var jsonData = []; // 存储table数据的JSON对象
rows.each(function() {
  var cols = jQuery(this).find('td, th'); //获取当前行的所有列
  var rowData = {}; //存储当前行数据的JSON对象
  cols.each(function() {
    rowData[jQuery(this).attr('name')] = jQuery(this).html(); //设置当前行指定列的值
  })
  jsonData.push(rowData); //将当前行数据保存到JSON对象中
})

3.3. 将JSON对象转化为json字符串

同样使用JSON.stringify()函数来将JSON对象转化为json字符串。

下面是示例代码：

var jsonString = JSON.stringify(jsonData); //将JSON对象转化为json字符串

3.4 完整代码示例

下面是完整的示例代码实现：

<table>
  <thead>
    <tr>
      <th name="id">编号</th>
      <th name="name">姓名</th>
      <th name="age">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td name="id">1</td>
      <td name="name">张三</td>
      <td name="age">18</td>
    </tr>
    <tr>
      <td name="id">2</td>
      <td name="name">李四</td>
      <td name="age">20</td>
    </tr>
    <tr>
      <td name="id">3</td>
      <td name="name">王五</td>
      <td name="age">22</td>
    </tr>
  </tbody>
</table>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var rows = jQuery('table tr');

var jsonData = []; // 存储table数据的JSON对象
rows.each(function() {
  var cols = jQuery(this).find('td, th'); //获取当前行的所有列
  var rowData = {}; //存储当前行数据的JSON对象
  cols.each(function() {
    rowData[jQuery(this).attr('name')] = jQuery(this).html(); //设置当前行指定列的值
  })
  jsonData.push(rowData); //将当前行数据保存到JSON对象中
})

var jsonString = JSON.stringify(jsonData); //将JSON对象转化为json字符串
console.log(jsonString);
</script>

以上便是两种获取table中数据并拼成json字符串的实现方式。希望对您有所帮助。