NodeList from .innerHTML to Array or String - javascript

I am trying to save cell entries of a randomly sorted HTML table to a variable in JavaScript. I am so far that I get a nodeliste of the first column at the click of a button. My question is, how can I convert this NodeListe into an array? I have tried different things like Array.prototype.slice.call (nl); inside the findOrder function (inside for declaration) but it does not seem to have been very successful, since the individual entries appear as an array instead of all the entries in one array.
Working code:
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = document.getElementsByClassName("order");
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>

orderlist is actually an HTMLCollection. You can convert NodeList or HTMLCollection to an Array using spread element
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = [...document.getElementsByClassName("order")];
console.log(Array.isArray(orderlist));
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>

Related

Changing Day Date of <td> using JQuery

I am trying to change all the table Due Date values from the 31st to the 25th using jquery. The current code I am using is not working, as it is putting all values instead of the single value.
var dueDate1 = $("td:contains(/31/)").text();
var dueDate = dueDate1.replace(/31/g, "25");
$("td:contains(/31/)").text(dueDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>
Your attempt is working on the entire set of data all at once.
$("td:contains(/31/)").text(); will return all the text of all the cells.
Instead, loop through the cells and update them individually.
$("td:contains('31')").each(function(idx, element){
$(element).text($(element).text().replace("31", "25"));
});
td { padding:2px; border:1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

Take data from a table to display as plain text

I want to take data from each row to display as simple text on the same page in a paragraph.
Example table below:
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
The output should look like:
A1 B1 C1 A2 B2 C2
I have tried look for the solution, but it is not working. I appreciate any help in advance.
Use document.querySelectorAll('td') to get all the td elements. Iterate over the elements using forEach loop and get their text using textContent. In the paragraph add this text using innerHTML
document.querySelector('#a').querySelectorAll('td').forEach((e)=>document.querySelector('#here').innerHTML+=e.textContent + " ")
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Using jquery, get all the td elements and iterate over them using each and append the text to the paragraph using append()
$('#a').find('td').each(function(i,e){
$('#here').append($(e).text() + " ")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Try like this, using HTML DOM children Property
var dataTable = document.getElementsByTagName('table');
var dataTableBody = dataTable[0].children[1];
for (var i = 0; i < dataTableBody.length; i++) {
console.log(dataTableBody[i].innerHTML)
}
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>

Javascript store table in a variable with conditions

This is how my page looks like:
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
I would like to store the tables with class name bgLtTable. These table can appear up to 3-4 times in this page. Is it possible to get the specific table using the div above it? Something like:
var tableAddress = div.innerHtml="Customer Addresses".table.bgLtTable;
var tableMembers = div.innerHtml="Family Members".table.bgLtTable;
Maybe try to use document.getElementsByTagName("TABLE");
This will give you an object that is accessible via index
You can then assign those elements to a variable and loop through it but look where the class attribute is equal to className for example
var element = document.getElementsByTagName("TABLE");
for (var i = 0; element.length > i; i++)
{
var elementClass = element[i].getAttribute('class');
}
I am not 100% sure this answers your question how I understand is you just want to get the class.
I hope this helps I am also pretty new to coding but always willing to help if I can.
var CustomerAddressesTable = $('div.smTitle:contains("Customer Addresses")').next('.bgLtTable');
console.log($("<div />").append($(CustomerAddressesTable).clone()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="prnt">
<td>
<div class="bgSmTitle smTitle">Customer Addresses</div>
<table class="bgLtTable">
<tr>
<td class="bgLtRow1 padded">New York</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Osaka</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Los Angeles</td>
</tr>
</table>
</td>
</tr>
<tr class="prnt">
<td colspan="3">
<div class="bgSmTitle smTitle">Family Members</div>
<table class="bgLtTable">
<tr>
<td class="bgHeader1 padded" style="width:24%;">Name</td>
<td class="bgHeader2 padded" style="width:10%;">Relationship</td>
<td class="bgHeader1 padded" style="width:30%;">Age</td>
</tr>
<tr>
<td class="bgLtRow1 padded">Jordan</td>
<td class="bgLtRow2 padded">Father</td>
<td class="bgLtRow1 padded">58</td>
</tr>
</table>
</td>
</tr>
</table>
This method will give you the html of the required table.

Aligning data vertically in td elements for horizontally connected rows using jquery

I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.
You can merely add the desired <td>s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
$(document).ready(function(){
$('.comps + .comps').remove();
$('.myTable tr').each(function(i) {
if (i > 0) {
$(this)
.append('<td>' + list1[i - 1] + '</td>')
.append('<td>' + list2[i - 1] + '</td>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table>.

Categories