We Keep Coding

How to get the number of rows from nested table with Xpath?

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

Sort table rows based on background-color using jquery

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. :)

Get nested table id by searching td text

HI i want to get nested table id based on text search.Please help me on this.
i want to get id="nested1" by searching text "PCI Date".
<table>
<tbody>
<tr>
<td>
<table id="nested1">
<tbody>
<tr>
<td><span>PCI Date</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="nested2">
<tr>
<td><span>New text</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
</table>

Try using contains() & parents()
var id = $('span:contains("PCI Date")').parents('table').attr('id');
alert(id);
Reference:
contains()
parents()

How to prepend html text for a selected element in ckeditor 4

I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>

you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");

You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());

Find previous div of a specific class with Jquery

I use jquery and I want to find the previous div which has the "error" class
My html code :
<table class="questions">
<tr>
<td class="heading">1
<div class="error"></div>
</td>
<td colspan="4">
<textarea class="textcontrol required" name='questionT136'>
</textarea>
</td>
</tr>
<tr>
<td></td>
<th><label for="reponse137-3">Très satisfaisant</label></th>
<th><label for="reponse137-4">Satisfaisant</label></th>
<th><label for="reponse137-5">Insatisfaisant</label></th>
</tr>
<tr class="q">
<td class="heading">
2
<div class="error"></div>
</td>
<td class="questionradio"><input class="required" id='reponse137-3'
name='questionN137' type='radio' value='3'></td>
<td class="questionradio"><input class="required" id='reponse137-4'
name='questionN137' type='radio' value='4'></td>
</tr>
</table>
For example, from reponse137-3, I'd like to change the value the previous class="error". I allready tryied to access to that object with :
$('#reponse137-3').prev(".error")
but it doesn't work. I think because it hasn't the same parent, so I tryied :
$('#reponse137-3').prev("tr").next(".error")
How can I do ?

Assuming your .error div is always in the same table row:
$('#reponse137-3').closest('tr').find('.error:first');
http://jsfiddle.net/vkfF8/

You need to go up three times to arrive to table, and later find error
$('#reponse137-3').parent().parent().parent().find('.error');
First parent go to th, second to tr and thirth to table, then find within table what element has class named .error And you will get it