Question

嘿伙计我有一张桌子

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

我有一个数组可以填充这些数据：

    var params = {
        "fruit":"apple",
        "test": "Nope",
        "values": [
        [Here,Must  ,Come the header ],
        [Here,must come ,the first table data],
        [Here must,comt the ,second tabel data]
        ],
    }

这只是1个表的一个例子一些表包含更多行。

如何确保整个数据都在数组中？

Answer 1

您需要嵌套循环才能获得所需的结果。请参阅以下代码段

＆＃13;

 var params = {
        "fruit":"apple",
        "test": "Nope",
        "values": [
       
        ],
    }
    
    $(function(){
        $('button').click(function() {
            $("#mytable tr").each(function(index, item){
              var temp = []
              if(index == 0) {
                $(item).find('th').each(function(idx, col){
                    temp.push($(col).text());
                })
              }
              $(item).find('td').each(function(idx, col){
                temp.push($(col).text());
              })
              params.values.push(temp)
            })
             console.log(params);
        })
      
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
<button>Click</button>

＆＃13;

Answer 2

您可以将each()循环与map()和get()结合使用，将每个表格行添加为params.values的新数组。

＆＃13;

var params = {
  "fruit": "apple",
  "test": "Nope",
  "values": [],
}

$('table tr').each(function() {
  params.values.push($(this).find('*').map(function() {
    return $(this).text()
  }).get())
});

console.log(params)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

＆＃13;

你也可以代替each()循环而push()只使用map()和get()两次。

＆＃13;

var params = {
  "fruit": "apple",
  "test": "Nope"
}

params.values = $('table tr').map(function() {
  return [$(this).find('*').map(function() {
    return $(this).text()
  }).get()]
}).get();

console.log(params)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

＆＃13;

把表放在数组中

2 个答案: