Найдите второй тд каждой таблицы и поместите его в массив - PullRequest
Новая
       0

Найдите второй тд каждой таблицы и поместите его в массив

0 голосов
/ 29 июня 2018

У меня есть эта таблица HTML : 

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>

Я хочу извлекать значения из каждой секунды <td> и помещать их в массив.

Например:

code массив содержит VISA01, UMBR21
name массив содержит Sun Viscor Clip, Compact Umbrella With Steel Shaft

Может кто-нибудь помочь мне?

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Я решил это, сделав это .. не лучшее / элегантное решение, но, по крайней мере, оно работает. 

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);
0 голосов
/ 29 июня 2018

Вы можете использовать reduce, чтобы сгруппировать выбор и присвоение ES6 для доступа к требуемым переменным: 

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 что у нас есть _name псевдоним для name, поскольку name является зарезервированным ключевым словом JS, а методы доступа с name преобразуют все структуры данных в строку: 

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

Общая практика заключается в том, чтобы не использовать name в качестве имени переменной.

0 голосов
/ 29 июня 2018

Попробуйте 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...