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


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



I have this HTML table:




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.


<td>



For example:



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


code


VISA01


UMBR21


name


Sun Viscor Clip


Compact Umbrella With Steel Shaft



Can anyone please help me out?





Please read the following two links: stackoverflow.com/help/mcve and stackoverflow.com/help/how-to-ask
– aydow
Jun 29 at 3:23






Possible duplicate of How to select nth element of the same type
– Rehan Haider
Jun 29 at 11:31




3 Answers
3



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


reduce


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:


Note


_name


name


name


name


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



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


name



Give it a try




<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

$(document).ready(function(){
$("table tr > td:nth-child(2)").each(function(index, elem){
console.log(elem);
});
});

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



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






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more