Find the 2nd td of every table and push it into array

Question

var code = [];
var pname = [];
var description = [];
var size = [];
var printarea = [];
var colours = [];
var comments = [];

var cell = document.getElementsByTagName("td");


for (var i = 1; i < cell.length; i += 14) {
  var c = cell[i].innerHTML;
  code.push(c);
}

console.log(code);
console.log(pname);

// code = VISA01, UMBR21
// name = Sun Viscor Clip, Compact Umbrella With Steel Shaft
// description = Stylish Sun Visor Clip which holds your sunglasses in place and within reachProtects your sunglasses away from being scratchedEasy to use, sturdy, clips well and does not block your vision while driving SIZE 8 (w) x 3 (h) cm,  Compact umbrella with steel shaft for a strong wind-resistant performancePush button and auto-open for a convenient and effortless openingDurable Logo printed on front and back panels; comes in several colors; can combine colors upon request

<html>

<head>
  <title>Table to Array</title>


  <body>
    <table class="ty-table ty-qty-discount_ _table">
      <tbody>
        <tr>
          <td>CODE</td>
          <td>VISA01</td>
        </tr>
        <tr>
          <td>NAME</td>
          <td>Sun Visor Clip</td>
        </tr>
        <tr>
          <td>DESCRIPTION</td>
          <td>Stylish Sun Visor Clip which holds your sunglasses in place and within reachProtects your sunglasses away from being scratchedEasy to use, sturdy, clips well and does not block your vision while driving</td>
        </tr>
        <tr>
          <td>SIZE</td>
          <td>8 (w) x 3 (h) cm</td>
        </tr>
        <tr>
          <td>PRINT AREA</td>
          <td>4 (w) x 1 (h) cm</td>
        </tr>
        <tr>
          <td>COLOURS</td>
          <td>navy, black, red, royal, white, orange, green</td>
        </tr>
        <tr>
          <td>COMMENTS</td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table class="ty-table ty-qty-discount__table">
      <tbody>
        <tr>
          <td>CODE</td>
          <td>UMBR21</td>
        </tr>
        <tr>
          <td>NAME</td>
          <td>Compact Umbrella With Steel Shaft</td>
        </tr>
        <tr>
          <td>DESCRIPTION</td>
          <td>Compact umbrella with steel shaft for a strong wind-resistant performancePush button and auto-open for a convenient and effortless openingDurable Logo printed on front and back panels; comes in several colors; can combine colors upon request
          </td>
        </tr>
        <tr>
          <td>SIZE</td>
          <td>53 (h) cm</td>
        </tr>
        <tr>
          <td>PRINT AREA</td>
          <td>20 (w) x 20 (h) cm</td>
        </tr>
        <tr>
          <td>COLOURS</td>
          <td>black, white, red, blue.please call for more colour options</td>
        </tr>
        <tr>
          <td>COMMENTS</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

I want to extract the values from every second <td> and put it in to an array.

For example:

code array contains VISA01, UMBR21
name array contains Sun Viscor Clip, Compact Umbrella With Steel Shaft

Can anyone please help me out?

Please read the following two links: https://stackoverflow.com/help/mcve and https://stackoverflow.com/help/how-to-ask — aydow, Jun 29 '18 at 03:23
Possible duplicate of [How to select nth element of the same type](https://stackoverflow.com/questions/41848550/how-to-select-nth-element-of-the-same-type) — Rehan Haider, Jun 29 '18 at 11:31

Joven28 · Answer 1 · 2018-06-29T03:25:15.220

Give it a try

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("table tr > td:nth-child(2)").each(function(index, elem){
     console.log(elem);
    });
});
</script>
</head>


  <body>
    <table class="ty-table ty-qty-discount_ _table">
      <tbody>
        <tr>
          <td>CODE</td>
          <td>VISA01</td>
        </tr>
        <tr>
          <td>NAME</td>
          <td>Sun Visor Clip</td>
        </tr>
        <tr>
          <td>DESCRIPTION</td>
          <td>Stylish Sun Visor Clip which holds your sunglasses in place and within reachProtects your sunglasses away from being scratchedEasy to use, sturdy, clips well and does not block your vision while driving</td>
        </tr>
        <tr>
          <td>SIZE</td>
          <td>8 (w) x 3 (h) cm</td>
        </tr>
        <tr>
          <td>PRINT AREA</td>
          <td>4 (w) x 1 (h) cm</td>
        </tr>
        <tr>
          <td>COLOURS</td>
          <td>navy, black, red, royal, white, orange, green</td>
        </tr>
        <tr>
          <td>COMMENTS</td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table class="ty-table ty-qty-discount__table">
      <tbody>
        <tr>
          <td>CODE</td>
          <td>UMBR21</td>
        </tr>
        <tr>
          <td>NAME</td>
          <td>Compact Umbrella With Steel Shaft</td>
        </tr>
        <tr>
          <td>DESCRIPTION</td>
          <td>Compact umbrella with steel shaft for a strong wind-resistant performancePush button and auto-open for a convenient and effortless openingDurable Logo printed on front and back panels; comes in several colors; can combine colors upon request
          </td>
        </tr>
        <tr>
          <td>SIZE</td>
          <td>53 (h) cm</td>
        </tr>
        <tr>
          <td>PRINT AREA</td>
          <td>20 (w) x 20 (h) cm</td>
        </tr>
        <tr>
          <td>COLOURS</td>
          <td>black, white, red, blue.please call for more colour options</td>
        </tr>
        <tr>
          <td>COMMENTS</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Leonid Pyrlia · Accepted Answer · 2018-06-29T09:21:11.930

You can use reduce to group the selection and ES6 destructuring assignment to access the required vars:

const { 
  code,
  name: _name,
  description,
  size,
  printarea,
  colours,
  comments
} = [...document.querySelectorAll('.ty-table')].reduce((all, table) => {

  [...table.getElementsByTagName('tr')].forEach(tr => {

    const [key, val] = [...tr.getElementsByTagName('td')].map(n => n.innerText.trim());

    const keyLc = key.replace(/ /g,'').toLowerCase();

    if (!all.hasOwnProperty(keyLc)) {
      all[keyLc] = [];
    }

    all[keyLc].push(val);

  })

  return all;

}, {});;

console.log(code);
console.log(_name);
console.log(description);
console.log(size);
console.log(printarea);
console.log(colours);
console.log(comments);

Note that we have _name alias for name, as name is a reserved JS keyword and accessors with name convert all data structures to string:

var name = [1,2,3];
typeof name === 'string' // true

General practice is not to use name as your variable name.

score -1 · Answer 3 · answered Jun 29 '18 at 04:22

I solved it by doing this.. not the best/elegant solution but at least it works.

var code = [];
var pname = [];
var description = [];
var size = [];
var printarea = [];
var colours = [];
var comments = [];

var cell = document.getElementsByTagName("td");


for (var i = 1; i < cell.length; i+=14) {
    var c = cell[i].innerHTML;
    code.push(c);
}

for (var i = 3; i < cell.length; i+=14) {
    var n = cell[i].innerHTML;
    pname.push(n);
}

for (var i = 5; i < cell.length; i+=14) {
    var d = cell[i].innerHTML;
    description.push(d);
}

for (var i = 7; i < cell.length; i+=14) {
    var s = cell[i].innerHTML;
    size.push(s);
}

for (var i = 9; i < cell.length; i+=14) {
    var p = cell[i].innerHTML;
    printarea.push(p);
}

for (var i = 11; i < cell.length; i+=14) {
    var col = cell[i].innerHTML;
    colours.push(col);
}

for (var i = 13; i < cell.length; i+=14) {
    var com = cell[i].innerHTML;
    comments.push(com);
}

console.log(code);
console.log(pname);
console.log(description);
console.log(size);
console.log(printarea);
console.log(colours);
console.log(comments);

Find the 2nd td of every table and push it into array

3 Answers3