Load table values into an array and then output to another table

Question

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);
    }
}

Loosely based on Convert Table to an Array. This loads the 2-column table values into one array and then outputs the data to another 2-column table, but rather than loading both columns of data in to one array and then outputting every other array value for the 2nd column like I am currently doing, I want to load and output the two columns of data separately. How can I process the two (or more) columns of data separately (2 arrays)?

Why can't you just clone rows? Really not clear what you are trying to do exactly. Description is confusing — charlietfl, Mar 10 '16 at 19:33

score 0 · Accepted Answer · answered Mar 10 '16 at 22:04

That's what you are looking for?

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);
    }
}

I'd recommend an array of an array though:

$("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();
    }); 
});

Then you can access whichever row you want like this:

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);
    }
}

Just remove the second <td> in both <tr>s so you only have the number, for example.

JSFiddle with the different possibilities

score 0 · Answer 2 · answered Apr 07 '16 at 14:32

<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>

This method is much simpler; it outputs the table as it is read. No 'for' loop is necessary. JSFiddle here: https://jsfiddle.net/55cc077/mwgggv35/

Load table values into an array and then output to another table

2 Answers2