将表值加载到数组中,然后输出到另一个表

时间:2016-03-10 19:28:39

标签: jquery arrays html-table

HTML:

<p>Load these table values into an array</p>
<table>
    <tr>
        <th>Number</th>
        <th>Count</th>
    </tr>
    <tr>
        <td>1</td>
        <td>10</td>
    </tr>
    <tr>
        <td>2</td>
        <td>80</td>
    </tr>
    <tr>
        <td>3</td>
        <td>25</td>
    </tr>
    <tr>
        <td>4</td>
        <td>30</td>
    </tr>
    <tr>
        <td>5</td>
        <td>45</td>
    </tr>
    <tr>
        <td>6</td>
        <td>35</td>
    </tr>
    <tr>
        <td>7</td>
        <td>12</td>
    </tr>
    <tr>
        <td>8</td>
        <td>10</td>
    </tr>
    <tr>
        <td>9</td>
        <td>21</td>
    </tr>
</table>

<p>Output array values to this table</p>
<table class="myTable">
    <tr>
        <th width="10%">Number</th>
        <th width="10%">Count</th>
    </tr>
</table>

JS:

var i = 0;
var values = Array();
$("table tr td").each(function(i, v) {
    values[i] = $(this).text();
})
tablegenerate(values);

function tablegenerate(values) {
    for (i = 0; i < values.length;) {
        var $formrow = '<tr><td>' + values[i] + '</td><td>' + values[i + 1] + '</td><tr>';
        i = i + 2;
        $('.myTable').append($formrow);
    }
}

基于Convert Table to an Array。这会将2列表值加载到一个数组中,然后将数据输出到另一个2列表,而不是将两列数据加载到一个数组中,然后输出第二列的每个其他数组值,就像我目前一样这样做,我想分别加载和输出两列数据。如何分别处理两个(或更多)数据列(2个数组)?

2 个答案:

答案 0 :(得分:0)

这就是你要找的东西?

var only_count = Array();
$("table tr:has(td)").each(function(i, v){
    only_count[i] = $(this).children('td:nth-of-type(2)').text();
});

function tablegenerate_only_count() {
    for (i = 0; i < only_count.length; i++) {
        var $formrow = '<tr><td>' + only_count[i] + '</td><tr>';
        $('.count-table').append($formrow);
    }
}

我建议使用数组数组:

$("table tr:has(td)").each(function(i, v){
    whole_table[i] = Array();
    $(this).children('td').each(function(ii, vv){
      whole_table[i][ii] = $(this).text();
    }); 
});

然后你可以像这样访问你想要的任何一行:

function tablegenerate() {
    for (i = 0; i < whole_table.length; i++) {
        var $formrow = '<tr><td>' + whole_table[i][0] + '</td><td>' + whole_table[i][1] + '</td><tr>';
        $('.myTable').append($formrow);
    }
}

只需删除<td>中的第二个<tr>,这样您就可以拥有该号码。

JSFiddle with the different possibilities

答案 1 :(得分:0)

<p>Load these table values into an array</p>
<table>
  <tr>
    <th>Number</th>
    <th>Count</th>
  </tr>
  <tr>
    <td>1</td>
    <td>10</td>
  </tr>
  <tr>
    <td>2</td>
    <td>80</td>
  </tr>
  <tr>
    <td>3</td>
    <td>25</td>
  </tr>
  <tr>
    <td>4</td>
    <td>30</td>
  </tr>
  <tr>
    <td>5</td>
    <td>45</td>
  </tr>
  <tr>
    <td>6</td>
    <td>35</td>
  </tr>
  <tr>
    <td>7</td>
    <td>12</td>
  </tr>
  <tr>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <td>9</td>
    <td>21</td>
  </tr>
</table>


<p>Output array values to this table</p>
<table class="myTable">
    <tr>
        <th width="10%">Number</th>
        <th width="10%">Count</th>
    </tr>
</table>

<!--Script outputs table values as they are read-->
<script>
var i = 0;
var values = Array();
//Read table values into an array
$("table tr td").each(function(i, v){
        values[i] = $(this).text();

//If i is odd, output the rows
if (i % 2 != 0) {
$('.myTable').append('<tr><td>'+values[i-1]+'</td><td>'+values[i]+'</td><tr>');
} 
});
</script>

这种方法简单得多;它在读取时输出表格。不需要'for'循环。 JSFiddle:https://jsfiddle.net/55cc077/mwgggv35/