将jquery数据表数据转换为json

Question

我正在使用 jquery 数据表。我有一张如下表，

<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
     </tbody>
</table>

我将表格转换为 jquery 数据表为$('#employees').DataTable()

我想将我的 jquery 数据表转换为 json 格式。 请帮我将其转换为

[{"Id":"1", "Name":"Karthik","Email":"kk@gmail.com","Phone":"1234"}]

Answer 1

尝试使用DataTable rows函数

 $('#YourDataTableID').DataTable().rows( { search: 'applied' } ).data().toArray();

Answer 2

试试这个

$(document).ready(function(){

   // Let's put this in the object like you want and convert to JSON (Note: jQuery will also do  this for you on the Ajax request)
   alert(JSON.stringify(tableToJSON($("#employees"))));
});


function tableToJSON(tblObj){  
   var data = [];
   var $headers = $(tblObj).find("th");
   var $rows = $(tblObj).find("tbody tr").each(function(index) {
   $cells = $(this).find("td");
   data[index] = {};
   $cells.each(function(cellIndex) {
     data[index][$($headers[cellIndex]).html()] = $(this).html();
   });    
});
  return data;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="employees">
  <thead>
     <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
   <tbody>
      <tr>
           <td>1</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>1234</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Karthik</td>
           <td>Kk@gmail.com</td>
           <td>4567</td>
       </tr>
     </tbody>
</table>

Answer 3

var employees = convertTableToArrayObject();
alert(JSON.stringify(employees));

function convertTableToArrayObject() {

    var employeeObjects = [];
    var table = $('#employees').DataTable();
    var data = table.rows().data();

    for (var i = 0; i < data.length; i++) {
        employeeObjects.push(data[i]);
    }

    return employeeObjects;
}

• 函数 convertTableToArrayObject： 在数据表的每一行上循环，并添加到数组对象中
• JSON.stringify(员工)： 将数组对象转换为 json

Answer 4

首先需要获取列值：

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});

这会给你：

["Id", "Name", "Email", "Phone"]

使用它，我们可以在每一行中循环并获取值：

var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});

所以最后你会得到：

var heads = [];
$("thead").find("th").each(function () {
  heads.push($(this).text().trim());
});
var rows = [];
$("tbody tr").each(function () {
  cur = {};
  $(this).find("td").each(function(i, v) {
    cur[heads[i]] = $(this).text().trim();
  });
  rows.push(cur);
  cur = {};
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table id="employees">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Karthik</td>
      <td>Kk@gmail.com</td>
      <td>1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Praveen</td>
      <td>pp@gmail.com</td>
      <td>5678</td>
    </tr>
  </tbody>
</table>

预览：

输出：http://jsbin.com/kuhuzivadi/edit?html,js,console,output