Question

我试图将表数据作为JSON对象id条目作为Key，将其文本内容作为Value。该表可能包含许多行，我的目的是使一个td可编辑，以便可以在所有返回的行上键入并保存。

继承我的代码，到目前为止我所做的和输出：

<table id="sub_ages" class="customer-age">
<th>Names</th><th>Id Number</th><th>Age</th>
  <tr><td id="names">John</td><td id="user_id">2887</td><td id="age" contentEditable></td></tr>
  <tr><td id="Names">Mary</td><td id="user_id>2889</td><td id="age" contentEditable></td></tr>
  <tr><td id="Names">Isaac</td><td id="user_id>2890</td><td id="age" contentEditable></td></tr>
  <tr><td id="Names">Ishmael</td><td id="user_id>2891</td><td id="age" contentEditable></td></tr>
  <button onClick="save()">Save<button>
</table>

Javascript save()功能：

function save(){
  $('#sub_ages').each(function(index,tr) {
            var n = $('td', tr).map(function(index,td) {
                var custid= $(this).attr('id');
                var itemline = $(td).text();

                item = {
                    custid: itemline
                };    
                jsonOBJData.push(item);    
            });
            console.log(jsonOBJData);
            alert("Data Saved");
}

输出：

0: {custid: "John"}
1: {custid: "2887"}
2: {custid: "20"}
3: {custid: "Mary"}
4: {custid: "2889"}
5: {custid: "22"}
6: {custid: "Isaac"}
7: {custid: "2890"}
8: {custid: "save"}

期望的输出：

0: {"name":"John", "user_id":"2887", "age":"20"}
1: {"name":"Mary", "user_id":"2889", "age":"22"}

我将不胜感激任何协助或纠正。

Answer 1

正如上面的评论中所提到的，ID应该在文档中使用。我已经使用类替换了重复的ID，并添加了thead和tbody元素以简化流程。

function save() {
  var values = $("#sub_ages tbody tr").map(function() {    // map each tr in the body #sub_ages table
      var $this = $(this);                                 // wrap this tr in a jQuery object
      return {                                             // return an object as the map result for this tr
          name: $this.find(".name").text(),                // its name property is the text value of this tr's .name element
          user_id: $this.find(".user_id").text(),          // its user_id property is the text value of this tr's .user_id element
          age: $this.find(".age").text()                   // ...
      };
  }).get();                                                // so far we got the result but it is wrapped in a jquery object so we call get to extract just the result array

  console.log(values);
}

table { width: 100%; }
tr { background: #eee; }
tr:nth-child(2n) { background: #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onClick="save()">Save</button>
<table id="sub_ages" class="customer-age">
  <thead>
    <tr>
      <th>Names</th>
      <th>Id Number</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name">John</td>
      <td class="user_id">2887</td>
      <td class="age" contentEditable></td>
    </tr>
    <tr>
      <td class="name">Mary</td>
      <td class="user_id">2889</td>
      <td class="age" contentEditable></td>
    </tr>
    <tr>
      <td class="name">Isaac</td>
      <td class="user_id">2890</td>
      <td class="age" contentEditable></td>
    </tr>
    <tr>
      <td class="name">Ishmael</td>
      <td class="user_id">2891</td>
      <td class="age" contentEditable></td>
    </tr>
  </tbody>
</table>

Answer 2

hier是一个检查它的例子

＆＃13;

function save(){
var array=[];
var table=$("#sub_ages");
table.find('tbody tr').each(function(){
  var object={};
  $(this).find('td').each(function(){
    var tdId=$(this).attr('id');
    if(tdId=='names'){
      object.name=$(this).text();
    }else if(tdId=="user_id"){
      object.id=$(this).text();
    }else{
      object.age=$(this).text();
    }
  })
 if(Object.keys(object).length>0){
  array.push(object);
 }
})
console.log(array);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sub_ages" class="customer-age">
	<tr><th>Names</th><th>Id Number</th><th>Age</th></tr>
	<tr><td id="names">John</td><td id="user_id">2887</td><td id="age" contentEditable>20</td></tr>
	<tr><td id="names">Mary</td><td id="user_id">2889</td><td id="age" contentEditable>21</td></tr>
	<tr><td id="names">Isaac</td><td id="user_id">2890</td><td id="age" contentEditable>22</td></tr>
	<tr><td id="names">Ishmael</td><td id="user_id">2891</td><td id="age" contentEditable>23</td></tr>
</table>
<button onclick="save()">Save</button>

＆＃13;

Answer 3

function save(){
  var jsonOBJData=[];
  $('#sub_ages tr').not(':first').each(function() {
        var name=$(this).find('#names').text();
        var user_id=$(this).find('#user_id').text();
        var age=$(this).find('#age').text();
        var item = {
                    'name': name,
                    'user_id': user_id,
                    'age': age
                   };
        jsonOBJData.push(item);
  });
  console.log(jsonOBJData);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- corrected your html code  -->
<table id="sub_ages" class="customer-age">
<tr>
   <th>Names</th><th>Id Number</th><th>Age</th>
</tr>
 <tr>
    <td id="names">John</td><td id="user_id">2887</td><td id="age" contentEditable>20</td>
 </tr>
 <tr>
  <td id="names">Mary</td><td id="user_id">2889</td><td id="age" contentEditable>37</td>
 </tr>
 <tr>
  <td id="names">Isaac</td><td id="user_id">2890</td><td id="age" contentEditable>58</td>
 </tr>
 <tr>
  <td id="names">Ishmael</td><td id="user_id">2891</td><td id="age" contentEditable>26</td>
 </tr>
</table>
<button onClick="save()">Save</button>

JQuery将表id作为键，将text作为值转换为行条目的数组

3 个答案: