Question

html

  <tbody id="player-list" class="list">
      <tr>
        <td class="id" style="display:none;">1</td>
        <td class="name">Jonny</td>
        <td class="age">27</td>
        <td class="city">Stockholm</td>
        <td class="edit"><button class="edit-item-btn">Edit</button></td>
        <td class="remove"><button class="remove-item-btn">Remove</button></td>
      </tr>
  </tbody>

JS

  function SendData(){
        var tableArray =[];

        $('#player-list tr').each(function(index, tr) {
            var lines = $('td', tr).map(function(index, td) {
                return $(td).text();
            });
            // Here lines will contain an array of all td values for the current row:
            // like ['value 1', 'value 2', 'value 3']
            tableArray.push(lines);
        });

        console.log(tableArray);
    }

我的目的是将我的表tr td存储到一个对象，但现在我存储到一个数组中，console.log中的数据是0 = 1,1 = jonny，2 = 27,3 = stockkholm等等，它按号码存储，如何存储到对象并使其像这样列出

id = 1，name = Jonny，age = 27，city = Stockholm？

Answer 1

改为使用对象，并根据类名定义属性。

var tableArray = [];

$('#player-list tr').each(function(index, tr) {
  // initialize object
  var obj = {};
  // iterate over the `td` except last two
  $('td:not(.edit,.remove)', tr).each(function() {
    // define object properties
    obj[this.className] = $(this).text();
  });
  // push the object reference into the array
  tableArray.push(obj);
});

console.log(tableArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="id" style="display:none;">1</td>
      <td class="name">Jonny</td>
      <td class="age">27</td>
      <td class="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

＆＃13;

var tabledata = $(".needed").map(function() {
  var obj = {};
  obj[$(this).attr('data')] = $(this).text();
  return obj;

}).get();

console.log(tabledata)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="needed" data="id" style="display:none;">1</td>
      <td class="needed" data="name">Jonny</td>
      <td class="needed" data="age">27</td>
      <td class="needed" data="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

不需要.each()只有地图可以

＆＃13;

var obj = {};
var tabledata = $(".needed").map(function() {
  obj[$(this).attr('data')] = $(this).text();
  return obj;

}).get();

console.log(tabledata)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="needed" data="id" style="display:none;">1</td>
      <td class="needed" data="name">Jonny</td>
      <td class="needed" data="age">27</td>
      <td class="needed" data="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

将表数据存储到名为

2 个答案: