I have the nested table below for which I want to store in a variable the number of rows in the second tbody.
The Xpath of main table and Xpath of the second table tbody are:
//*[#id="MainTable"]/table
//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody
Testing in Chrome Console with the code below, I'm getting successfully the second tbody so far.
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
console.log( getElementByXpath("//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody") );
But I'm stuck in how to get the number of rows for this second tbody.
May someone help to achieve this getting the number of rows for this tbody or a better way to do it? Thanks for any help.
This is the HTML structure:
<table>
<tbody>
<tr>
<td id = "main">
<table id = "table_x">...</table>
<div>...</div>
<iframe>...<iframe>
<table class="table2_class" summary="MySummary">
<thead>...</thead>
<tbody>
<tr class="a1" >
<td class="td_class">1</td>
<td class="td_class">N</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
<tr class="b1" >
<td class="td_class">4</td>
<td class="td_class">W</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
<tr class="a1" >
<td class="td_class">7</td>
<td class="td_class">R</td>
<td class="td_class_1">
<div dir="" class="zzz">
<div class="div_class">
Some text
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Answering my own question.
This code it seems to work:
getElementByXpath("//*[#id='MainTable']/table/tbody/tr/td/table[2]/tbody").rows.length
Related
I'm trying to get all the tds in a table that contain a tr with a button to which I have specified an attribute ("boolean") with a true or false value. I need to get each td that have that attribute with value true but I can't figure out how to get it using jquery.
The structure would be the following:
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
I have tried to do something like this:
function colour() {
$("#table tbody tr").each(function() {
let colour = $(this).children("td")[1];
}
}
But I can't go from there to get those td since I have no experience with jquery
How could I get the td with row-id 1 and 3 with Jquery and then apply a style to those td?
Thanks in advance
Use a has selector with attribute selector
var trs = $('tr:has(button[boolean="true"])');
console.log(trs);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
</thead>
<tbody>
<tr row-id="1">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
<tr row-id="2">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="false">Button</button>
</td>
</tr>
<tr row-id="3">
<td class="text-left">
<div />
</td>
<td class="text-left td-button">
<button boolean="true">Button</button>
</td>
</tr>
</tbody>
</table>
$("#table tbody tr").each(function() {
//Filter to iterate those td's which contain Boolean true
if($(this).find('button').attr('boolean')=="true"){
let colour = $(this).children("td")[1];
colour.style.backgroundColor="red";
console.log(colour);
}
})
is there some way to lock a tr at the end of a table with VUE or Js?
I have a Vue-Component which adds tablerows dynamically based on an API call, but I need one specific tr to be at the bottom and if a new tr is added, it should be above the last one.
Not in the tfoot because there is some other nformation
Here is the Vue-Component
<tbody>
<tr is="deliverytable"
v-for="delivery in deliveries"
v-bind:key="delivery.id"
v-bind:delivery="delivery"></tr>
</tbody>
Template of the Vue-Component
<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
<td>
<div v-if="delivery.is_printable">
<input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
</div>
</td>
<td>[[ delivery.dispatched ]] Uhr</td>
<td>[[ delivery.action ]]</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
<div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
<div v-else-if="delivery.event != 0" #change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
</td>
<td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
<td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
<td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
<td>
<a v-if="delivery.is_deletable" type="button" #click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
</td>
</tr>
If your components iterated over in a loop you can render this specific after loop above
<table>
<thead>
some headers
</thead>
<tbody>
<tr v-for="(rowItem, key, index) in dataTable" :key="index">
your API call items
</tr>
<tr>
your specific item
</tr>
</tbody>
</table>
This is my FIDDLE
<table>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink;color:white">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green;color:white">hello</div>
</td>
</tr>
</table>
How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.
Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.
$("table tr").sort(function (a, b){
return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:blue">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:pink">hello</div>
</td>
</tr>
<tr>
<td>
<div style="background:green">hello</div>
</td>
</tr>
</table>
I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.
Here is the Html
<table>
</tbody>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
<tr><td>123</td></tr>
</table>
Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class
<script>
// please do add jQuery file to prevent error
function adddClass() {
for(i=1; i<=6; i++) {
alert("");
jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
}
}
adddClass();
</script>
Here is the style for background color of each table row tr
<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>
Hope this will help, Thanks.!
You can easily do it in javascript.
Initiate an empty js object like this var colorRowmap = {}
Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
Empty the table.
Loop through all keys of colorRowMap and push the tr roows to table.
Done. :)
here is my html code wordpress that makes a table in my plugin dash page:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td:
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me?
You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
Working Demo
You cannot apply hide on text() - you apply it on an HTML Element
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working
and the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() {
var columnmTo=$(this).parent("th").next("td").next("td");
columnmTo.find('.selectedTest').addClass('highlight');
columnmTo.find('.error').hide();
columnmTo.find('.row-actions').hide();
});
span.highlight
{
font-weight:bold;
}
span.error
{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
<span class="selectedTest">this text is to be selected</span>
<span class="error">Hello</span>
<div class="row-actions">
<span class="subjects">a</span>
<span class="settings">b</span>
<span class="clone">c</span>
<span class="users">c</span>
<span class="uploads">d</span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
I have a table structure like:
<table id= "mytable">
<body>
//first row
<tr class = "row">
<td id="rowTable">
<div id="myRow1"> Part 1 </div>
<div id="myRow2"> first </div>
<div id="myRow3"> 123 </div>
</td>
</tr>
//second row
<tr class = "row">
<td id="rowTable">
<div id="myRow1"> Part 2 </div>
<div id="myRow2"> second </div>
<div id="myRow3"> 456 </div>
</td>
</tr>
</body>
</table>
( I know the html part may seems incorrect but to be honest, I am not allowed to change it. I have to work with this structure)
And I want to read the first column of each row when I click on it by using javascript.
When I tried: var Value = $(e.currentTarget).text(); it gave me the value of the whole row which is:
Part 1 first 123
but I only want the value of the first part which is Part 1. Any idea of how to get that value?
You could do something like this:
the HTML:
<table id= "mytable">
<tr class = "row">
<td id="myRow1">Part 1</td>
<td id="myRow2">first</td>
<td id="myRow3">123</td>
</tr>
<tr class = "row">
<td id="myRow1">Part 2</td>
<td id="myRow2">second</td>
<td id="myRow3">456</td>
</tr>
</table>
the JS:
$(document).ready(function() {
$('td').click(function(e) {
val = e.target.innerHTML;
//alert(val);
//Put your code here
});
});