Convert <td> elements into array with Javascript

Convert <td> elements into array with Javascript - javascript

My goal is to create one array and later on insert some data using .unshift method.
I want an array to contain td elements only and be created using JavaScript instead of jQuery. Is it possible?
Here's my table :
<table id="scorestable">
<tr>
<th>Type</th>
<th>Score</th>
<th>Score</th>
<th>Type</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
.....

simply use:
var elements = document.getElementById("scorestable").getElementsByTagName('td');
then you will have: elements[0] , elements[1] and etc..

<table id="scorestable">
<tr>
<th>Type</th>
<th>Score</th>
<th>Score</th>
<th>Type</th>
</tr>
<tr>
<td>33</td>
<td></td>
<td>6</td>
<td></td>
</tr>
</table>
<script>
window.onload = function(e) {
var arrayResult = [];
var tdList = Array.prototype.slice.call(document.getElementById("scorestable").getElementsByTagName('td'));
tdList.forEach(function logArrayElements(element, index, array) {
if (element.innerText && element.innerText != "undefined") {
arrayResult.unshift(element.innerText);
}
});
console.log(arrayResult);
}
</script>

Related

Adding data-reverse attributes in JavaScript to dynamic HTML table

I am creating a HTML table dynamically and I want the headers to include data-reverse attribute in order to allow reverse sorting by pushing table headers:
<table>
<thead>
<tr>
<th data-reverse="true">Name</th>
<th data-reverse="true">Surname</th>
<th data-reverse="true">Age</th</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>62</td>
</tr>
<tr>
<td>Dylan</td>
<td>Jones</td>
<td>37</td>
</tr>
<tr>
<td>Alan</td>
<td>Shearer</td>
<td>55</td>
</tr>
<tr>
<td>Ringo</td>
<td>Starr</td>
<td>52</td>
</tr>
</tbody>
</table>
The code slice is below. I am wondering what should be corrected in the addRow() function in order to produce the above output with data-reverse="true" attribute?
Or somewhere else.
addRow(thead, "th");
fragment.appendChild(thead);
function addRow(dom, tag) {
for(j=1;j<rowArray.length;j++){
var el = doc.createElement(tag);
el.setAttribute(data-reverse,"true");
el.innerHTML = rowArray[j];
tr.appendChild(el);
dom.appendChild(tr);
}
}

Remove specific index child from parent DOM with removeChild() [Vanilla Javascript]

i have a table with this basic structure:
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<body>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
and i want to remove the second child from every "tr" tag, so i would like to do something like this:
const rows = document.getElementsByTagName('td')
for (let i = 0; i < rows.length; i++) {
rows[i].removeChild(target the second child here)
}
i'm looking for a solution with pure vanilla javascript (no jquery)

You might select the tds you want to remove via a single selector string, it's probably more elegant:
document.querySelectorAll('td:nth-child(2)')
.forEach(td => td.remove());
<table>
<thead>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tbody>
</table>
If the HTML is valid, the tds will necessarily be children of trs regardless, so you don't need to specify that the td's parent is a tr.
If you want to target a specific table on the page, rather than every td in every table, just put the table identifier in front of the selector string. Eg. if the target table's ID is 'table3', then use the selector string '#table3 td:nth-child(2)' to indicate td which are the second child in their parent, which are descendants of the element with ID table3.

In VanillaJS you can use document.querySelectorAll() and walk over the 2nd td using forEach()
[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
td.remove();
});
//$("#myTable td:nth-child(2)").remove()
[].forEach.call(document.querySelectorAll('#myTable td:nth-child(2)'), function(td) {
td.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
</thead>
<tbody>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
<tr>
<td>TD-1</td>
<td>TD-2</td>
<td>TD-3</td>
</tr>
</tbody>
</table>

You can use a query selector with nth-child.
const rows = document.getElementsByTagName('tr')
for (let i = 0; i < rows.length; i++) {
rows[i].removeChild(rows[i].querySelector('td:nth-child(2)'));
}
<table>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script>
var rows = document.getElementsByTagName('tr');
for (let i = 0; i < rows.length; i++) {
var row = rows[i];
var td = row.querySelector('td:nth-child(2)');
row.removeChild(td);
}
</script>

How to replace a text with row count with javascript

i have a dynamic table . that i'd add number for each tr. how can i replace the hello text with count of each tr with javascript?
here is my snippet of table:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
</body>
</html>

you should be using <td> instead of <th> after the header row.
$('tr').each(function(index, row){
$(row).children('td').first().text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Here is the solution for your problem -
var table = document.querySelector("#myTable");
var rows = table.querySelectorAll("tr");
let index = 0;
for( let row of rows){
for( let col of row.querySelectorAll("th")){
if( col.textContent == 'Hello'){
col.textContent = index;
}
}
index++;
}
<table border="1" id="myTable">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>

You need to get all the <tr> elements within the table. Then loop through the <tr>s and starting with the second one, replace its first child's text with the index of the current <tr>.
let tableRows = document.querySelectorAll("tr")
tableRows.forEach((tr, index) => {
if(index === 0) {
//Do nothing bc you don't want to remove the text in the first table row
} else {
let firstChild = tr.children[0]
firstChild.innerText = index
}
})

You can use find("td:first") to get the numbers that would replace "Hello". Also, since its a table, you need to use td. th are used for headers:
$('tr').each(function(index, row) {
$(row).find("td:first").text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Object property into table jQuery

I have the following table here
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
and I have a object which has the following properties Object {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306} (all copied from Chrome console)
How would I do something like this <td>object.balance</td> I just need the single value of a property. I've tried the following $(object.balance)appendTo('tr') but nothing seems to be working.

Use this for add balance to all td elements
$('td').html(object.balance);
To first td
$('td').first().html(object.balance);

Several ways to do this. Looks like you are using jQuery.
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td id="balancethingy">asdf</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
$('#balancethingy').text = myObject.balance ;
</script>

What this will do is select the 'td' item you specify in specfic_tr_number and set it's value to the object's value specified. Goodluck.
<table>
<thead>
<tr>
<th>Loan Type</th>
<th>Amount Borrowed</th>
<th>Current Payment</th>
<th>Current Term</th>
<th>Total Cost of Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
$('tbody tr').find('td:nth-child(specfic_tr_number)').html(myObject.balance);
</script>

You need to create dynically td also.I am creating td dynically acc to number of field in the object.I wrote the code in fsfiddle.Link is given below:-
var obj = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306}
for (var i in obj) {
var tdtag = document.createElement('td')
tdtag.innerHTML = obj[i]
var rowid = document.getElementById('rowId')
rowid.appendChild(tdtag)
}

Can't find the selectors of a fixed header table

Original Table Example
Example with Fixed Table Header
The first example shows a comparison table that displays data dynamically in a column on click. When the table is full, it'll remove .addinfo class and go back to the second column to replace old data. The problem comes in when I try to use a fixed header plugin from this page. It creates a second thead to allow th to be fixed at the top, like this:
<table id="toptable" style="padding: 0px;">
<thead class="Original">
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<thead class="Floating" style="display: none;"> //Second Thead//
<tr>
<th style="visibility:hidden">-</th>
<th class="image addinfo">Fdw</th>
</tr>
</thead>
<tbody>
<tr>
<td class="description">Name</td>
<td class="description addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tr>
<td class="title">Age</td>
<td class="title addinfo">Fdw</td>
</tr>
<tbody>
</table>
As you see in the second example, it can't remove the class .addinfo when the table is full. I guess I need to change the table selectors in the script to get it to work. Can someone tell me which table selectors I should change?
This code only works for the first example:
$(function () {
function filltable(buttontext) {
var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
.addClass('addinfo').html(buttontext);
}
$('.area').each(function () {
var area = $(this),
button = $(this).find('button'),
buttontext = button.text();
button.on("click", function () {
var allCells = $('table').find('th').length-1;
var fullCells = $('table th.addinfo').length;
console.log(allCells, fullCells);
if (allCells === fullCells) { // If table is full
$('table .addinfo').removeClass('addinfo');
filltable(buttontext);
} else { // If table isn't full
filltable(buttontext);
}
});
});
});
First Example Markup
<div class="area">
<button>Gah</button>
</div>
<div class="area">
<button>Kaj</button>
</div>
<div class="area">
<button>Fdw</button>
</div>
<div class="area">
<button>ffdf</button>
</div>
<table>
<thead>
<tr>
<th>Placeholder</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Age</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nationality</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Education</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Background</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Language</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Change
var allCells = $('#toptable').find('th').length - 1;
To
var allCells = $('#toptable').find('th').length - 2;
JS FIDDLE DEMO

Develop Reference

JavaScript is the programming language of the Web.

Convert <td> elements into array with Javascript - javascript

simply use: var elements = document.getElementById("scorestable").getElementsByTagName('td'); then you will have: elements[0] , elements[1] and etc..

Related

Adding data-reverse attributes in JavaScript to dynamic HTML table

Remove specific index child from parent DOM with removeChild() [Vanilla Javascript]

How to replace a text with row count with javascript

Object property into table jQuery

Can't find the selectors of a fixed header table

Categories

Resources