Delete tabel row with pure javascript - javascript

I Need to delete a table row with pure javascript. The table has only a class name, no id.
Here is a fiddle with my first try:
var table = document.getElementsByClassName('table');
while(table.rows.length > 0) {
table.deleteRow(1);
}
https://jsfiddle.net/5s0w6cwL/
Thanks for any advice.


You have to get first element.
var table = document.getElementsByClassName('table')[0];
because document.getElementsByClassName method returns a NodeList.
var table = document.getElementsByClassName('table')[0];
table.deleteRow(1);
<table class="table" border="1">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td>delete me</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Related

How to modify a HTML <td> (without any unique properties) element using Javascript

I'm trying to modify a element using JS however this element does not have any unique properties like ID. Also the table in which this element resides does not have a unique class. Also, the HTML page has multiple tables and td elements.
For example:
Existing HTML :
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName</td>
</tr>
</tbody>
</table>
I'm trying to modify the cell which contains the value "BirthName" to "BirthName (Sidharth)"
Something Like this:
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName (Sidharth)</td>
</tr>
</tbody>
</table>

You can find all having BirthName by using bellow colde
const allTds = document.querySelectorAll('td')
// Find the td element that contains the text "BirthName"
const birthDateTd = Array.from(allTds).filter(td=>td.textContent==='BirthName')
After that you can target that <td> as you want.

You can do checking the text for all td and change where matches birthname
let element = document.querySelectorAll('td');
for(let i = 0; i<element.length; i++){
if(element[i].innerText == 'BirthName'){
element[i].innerText += '(Sidharth)';
}
}

If the text is unique then you can use Xpath as shown below and change it.
var td = document.evaluate("//td[contains(text(), 'BirthName')]", document, null, XPathResult.ANY_TYPE, null );
var thisTd = td.iterateNext();
thisTd.innerHTML = "BirthName (Sidharth)";
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName</td>
</tr>
</tbody>
</table>

Get values of all first <td> in a table <tr> except the first using Javascript

I need to return a comma separated list of values for the first td from every tr in a table EXCEPT for the first tr.
In the html table example below i need to return:
41536, 41537
<table class="product-options">
<tbody>
<tr class="top-row">
<td>NEW Code</td>
<td>OLD Code</td>
<td>Other Code</td>
</tr>
<tr>
<td>41536</td>
<td>40227</td>
<td>60544</td>
</tr>
<tr>
<td>41537</td>
<td>41097</td>
<td>58974</td>
</tr>
</tbody>
</table>

document.querySelectorAll('table.product-options > tbody > tr:not(:first-child) > td:first-child')
querySelectorAll returns a NodeList.
tr:not(:first-child) returns all the lines except the first.
td:first-child returns the first cell.

I suggest you read in on CSS Selectors
With document.querySelectorAll and the correct query it's easy:
We use :not in this case to not select the tr we don't want and :first-child. for the first td we want
table.product-options tr:not(.top-row) > td:first-child
const list = document.querySelectorAll("table.product-options tr:not(.top-row) > td:first-child");
console.log(list);
<table class="product-options">
<tbody>
<tr class="top-row">
<td>NEW Code</td>
<td>OLD Code</td>
<td>Other Code</td>
</tr>
<tr>
<td>41536</td>
<td>40227</td>
<td>60544</td>
</tr>
<tr>
<td>41537</td>
<td>41097</td>
<td>58974</td>
</tr>
</tbody>
</table>

function () {
let node = 'table.product-options tr:not(.top-row) td:first-
child'
let Sku = document.querySelectorAll(node);
return Array.prototype.map.call(Sku, function(node) {
return node.textContent.replace(/\s/g, '');
});
}

How to get values of tbody element from the Table using the Table id and without giving tbody ID using javascript not Jquery

I am looking for the elements inside the tbody of table without using the tbody Id or class. from below code i am looking for the values inside td for those who has tr classname tag.
<table id="tableId">
<thead>
</thead>
<tbody>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
</tbody>
</table>

var tableId = document.getElementById('tableId');
var tBody = tableId.getElementsByTagName('tbody')[0];
var tableRow = tBody.getElementsByTagName('tr');
for (var t = 0; t < tableRow.length; t++){
console.log(tableRow[t].innerHTML)
}

Sorting table rows based on column class names using jquery

Very similair to this question: Sort table rows based on their Class Names
Consider the following table:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>
I would like to sort rows based on the first (in this case only) column class name. Some td don't have a class specified. So the desired effect would be: A-B-C -> C-B-A or B-A-C (I don't care where the classless tds are placed). I know I can get class with jquery, for example:
$(table tr).eq(1).find('td').eq(0).attr('class')
Any ideas?

Use sort() to sorting array of tr elements. You can get class of element in function of sort and set arrangement of every element.
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>

How can I get all <tr>-s from a <tbody> and convert it to String?

I have a HTML Table:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="getTbodyString();" value="get it"/>
I want some jquery/javascript, which can get the inside of the tbody by String. Like:
function getTbodyString() {
var tbodyString = $(.......).text(); //or val()?
alert("the body - "+tbodyString);
}
The result in the alert window should be this:
the body - <tr><td>Viktor</td><td>Male</td><td>etc</td></tr><tr><td>Melissa</td><td>Female</td><td>etc</td></tr><tr><td>Joe</td><td>Male</td><td>etc</td></tr>
Could anyone help me?

You need to html() instead of text(). The function text will not return you tags but returns plain text within tags.
var tbodyString = $('#tbodyID').html();
I would use native javascript function here that would be faster then jquery.
var tbodyString = document.getElementById('tbodyID').innerHTML; 

Just Replace your function code as below :
function getTbodyString() {
var tbodyString = $('#tbodyID').html();
alert("the body - "+tbodyString);
}

Categories