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

dynamic variable in ng-repeat Angular

My aim is to have a flexible number of tables and the tables being themselves dynamic.
This is my html code so far.
<div ng-repeat="deviceType in vm.devicesType">
<h2 ng-click="collapse=!collapse">My {{deviceType}}s <Strong ng-show="collapse">-</Strong><Strong ng-show="!collapse">+</Strong></h2>
<div ng-show="collapse">
<table ng-table-dynamic="user.controller.js.TableParams(deviceType) with user.controller.js.Columns(deviceType)">
<tr ng-repeat="device in (deviceType)" ng-if="$index==0">
<th ng-repeat="(key,value) in device" >
{{key}}
</th>
</tr>
<tr ng-repeat="device in (deviceType)")>
<td ng-repeat="(key,value) in device">
{{value}}
</td>
<td>
<a ng-click="vm.GetDeviceDetails(relay.id)">Details</a>
</td>
</tr>
</table>
</div>
</div>
The javascript is not the issue as the variables are well evaluated, however for now my output is an array with R e l a y ( in seperate rows ), Relay being a device type.
I would like to have the variable (deviceType) evaluated, when I replace with Relay, I have no issues.
Thank you for your help.

if no data will be displayed message

I have table in Html and table's rows are repeated angular-js directive called ng-repeat. And I am searching and ordering filters text input that have ng-model directive so I can filter any data. I use ui-bootstrap in my angularjs app.
Everything works but if user searchs and has no data in table then I want to show message with ng-show directive.
Here is my code.
<tbody>
<tr ng-repeat="item in HocaListesiDetails.slice(((currentPage-1)*itemsPerPage), (currentPage*itemsPerPage)) | filter:Search | orderBy:orderUserSelected " ng-style="item.TabloId == selectedHoca && {'background-color':'#ccc'}" ng-click="hocaSec(item.TabloId)">
<td>{{$index+1}}</td>
<td>{{item.AdSoyad}}</td>
<td>{{item.TcNumarasi}}</td>
<td>{{item.Telefon}}</td>
<td>{{item.DogumYeri}}</td>
<td>{{item.DogumTarihi | formattedFilter | date}}</td>
</tr>
<tr ng-show="FilteredHocaListesiDetails.length == 0" style="background:#fff;">
<td colspan="6">
<div class="alert alert-info">
<p class="text-center">Aradığınız kişi bulunamadı.</p>
</div>
</td>
</tr>
</tbody>

Try this
<tr ng-show="(FilteredHocaListesiDetails| filter:search).length == 0" style="background:#fff;">
<td colspan="6">
<div class="alert alert-info">
<p class="text-center">Aradığınız kişi bulunamadı.</p>
</div>
</td>
</tr>

I think, you need to include "filter:Search" in ng-show to check the length.
<tr ng-show="(list | filter:search).length==0">No Results</tr>

get classname of a last <tr> element in a div

I have a table like below. As you can see first <tr> element's class is "success" and second "active" and third is "success"...etc..
Now I want to do this dynamically. But I can't get last <tr> element's classname for add some condition.
How can I do this in JavaScript?
<div id="masterContainer" class="bs-example">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">User Information</div>
<div class="panel-body">
<p>The following table contains some personal information about users.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr class="success">
<td><b>First Name</b> <br> som</td>
</tr>
</thead>
<tbody>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="success">
td><b>First Name</b> <br> something</td>
</tr>
<tr class="active">
td><b>First Name</b> <br> something</td>
</tr>
</tbody>
</table>
</div>
</div>

You can use :last selector:
$('.table tr:last').attr('class');

The querySelectorAll method lets you pass CSS selectors to find nodes you're interested in
var nodes = document.querySelectorAll('div tr'); // all <tr> descendants of <div>s
nodes[nodes.length - 1].className; // "active" // the last of these

get the value of table row by cliking with JavaScript

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
});
});