<table class="list" border="0" cellspacing="0" cellpadding="0">
<tr class="dataRow">
<td scope="row" class="dataCell">
1
</td>
<td scope="row" class="dataCell">
2
</td>
<td scope="row" class="dataCell">
3
</td>
<td scope="row" class="dataCell">
Homepage
</td>
</tr>
<tr class="dataRow">
<td scope="row" class="dataCell">
1
</td>
<td scope="row" class="dataCell">
2
</td>
<td scope="row" class="dataCell">
3
</td>
<td scope="row" class="dataCell">
Blog
</td>
</tr>
<tr class="dataRow">
<td scope="row" class="dataCell">
1
</td>
<td scope="row" class="dataCell">
2
</td>
<td scope="row" class="dataCell">
3
</td>
<td scope="row" class="dataCell">
Contact
</td>
</tr>
</table>
var tableRow = document.querySelectorAll('.dataRow');
var links = $('.dataCell:nth-child(4) .ng-binding');
for(var i=0; i<tableRow.length; i++){
console.log(links[i]);
}
don't understand why the value of links is undefined
I've tried having the links variable created inside the loop as well but I get the same result - I think its because links is not an array? if thats the case how would I do that?
I've added the markup to explain my question better...I'm trying to get links from the table cell and do a .click() on them
This is the jQuery solution, but if that is a angular app you should use directives
var links = $('.dataCell:nth-child(4) .ng-binding');
This object length will be 0. See how nth-child works https://api.jquery.com/nth-child-selector/
I guess you want to click on last links in each cell.
var dataRow = $('.dataRow');
dataRow.each(function(ind, elem){
console.log($(this).find('.ng-binding').eq(3));
$(this).find('.ng-binding').eq(3).click();
});
Related
I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>
You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens
The Code for this is:
<!--- first list --->
<tr>
<td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
<td colspan="2"><li data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="65" style="margin-left:20px;"> references </li></td>
</tr>
<!--- Second List --->
<tr>
<td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>
what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id
same for second list ..
both lists should work independently and sorting should be on heir own, i gave a shot but not successful
here is my code
function sortdesc(){
$('li.childrens').sort(function(a,b){
return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
});
}
$(document).on('click',".sort",function(e) {
sortdesc();
});
tried here in fiddle but no luck [updated to add table to each li]
http://jsfiddle.net/HWmz3/85/
According to this answer:
function sortdesc(elem) {
// get the table of the clicked link, find its tbody
var $tbody = $(elem).closest('table').find('tbody');
// sort the tr of this tbody
$tbody.find('tr')
.sort(function(a, b) {
var a = $(a).find('li'); // get the li of a tr
var b = $(b).find('li'); // get the li of b tr
return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
})
.appendTo($tbody); // to make the sort
}
$(document).on('click', ".sort", function(e) {
// pass the link that was clicked to the function:
sortdesc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="81" style="margin-left:20px;">Running</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="113" style="margin-left:40px;">Coping</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="71" style="margin-left:40px;">Printing</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="65" style="margin-left:20px;">references</li>
</td>
</tr>
</tbody>
</table>
<!--- Second List --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="116" style="margin-left:20px;">Opening</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="109" style="margin-left:20px;">Closng</li>
</td>
</tr>
</tbody>
</table>
looks like a scope issue I can't get my head around not sure why the variable links is undefined when the function is called twice
<table class="list" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr class="headerRow">
<th scope="col" class="numericalColumn zen-deemphasize">Display Order</th>
<th scope="col" class=" zen-deemphasize">Message</th>
<th scope="col" class=" zen-deemphasize">Description</th>
<th scope="col" class=" zen-deemphasize">Media File Name</th>
<th scope="col" class="zen-deemphasize ">Location</th>
<th scope="col" class="zen-deemphasize ">Status</th>
<th scope="col" class=" zen-deemphasize">data</th>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
1
</th>
<td scope="row" class=" dataCell">
Homepage
<div class="mouseOverInfoOuter" tabindex="0">
</div>
</td>
<td class="dataCell">
Homepage
</td>
<td class="dataCell">
<a href="http://test.com/test/zip1" class="zipUrl">
test1.zip
</a>
</td>
<td scope="row" class="dataCell">
test1.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell">
</td>
<td class=" dataCell ">
</td>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
2
</th>
<td scope="row" class=" dataCell">
contact
<div class="mouseOverInfoOuter" tabindex="0"> </div>
</td>
<td class="dataCell">
contact
</td>
<td class="dataCell">
<a href="http://test.com/test/zip2" class="zipUrl">
test2.zip
</a>
</td>
<td scope="row" class="dataCell">
test2.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell">
</td>
<td class=" dataCell ">
</td>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
2
</th>
<td scope="row" class=" dataCell">
blog
<div class="mouseOverInfoOuter" tabindex="0"></div>
</td>
<td class="dataCell">
blog
</td>
<td class="dataCell">
<a href="http://test.com/test/zip3" class="zipUrl">
test3.zip
</a>
</td>
<td scope="row" class="dataCell">
test3.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell"></td>
<td class=" dataCell ">
</td>
</tr>
</tbody>
</table>
<script>
(function init() {
var tableRow = document.querySelectorAll('.dataRow');
var links = $('.dataCell:nth-child(4) .zipUrl');
if (tableRow.length === 0) return;
var index = 0;
function click() {
if (index < tableRow.length) {
//comment out line 14 to see console.log working normally
$(links[index++]).click();
console.log('Clicked on... ' + links[index++])
click();
}
}
click();
}());
</script>
Example
http://jsfiddle.net/Grundizer/6p60bkg9/
I'm trying to click on every link which is in the Media File Name column of the table, I don't have access to the source code to add or remove css classes, I have to work with the markup produced by the server.
Main problem was, index was incrementing two times one at $(links[index++]).click(); and another at console.log('Clicked on... ' + links[index++]); second time incrementation points at a null array element.
Do this->
$(window).load(function(){
var tableRow = document.querySelectorAll('.dataRow');
var links = $('.dataCell:nth-child(4) .zipUrl');
if (tableRow.length === 0) return;
var index = 0;
function click() {
if (index < tableRow.length) {
//comment out line 14 to see console.log working normally
$(links[index++]).click();
console.log('Clicked on... ' + links[index]);
click();
}
}
click();
}
);//]]>
by the way, there was some syntactical error, I fixed it in the solution code.
Using
var row = table.insertRow(id);
how can I specify that the new row goes under the used chosen ID, rather than a hardcoded index or at the end of the table? I have a drop down that has different options of what row id to place your new row under. The drop down options have matching ids to the related rows. Thanks. Here is my table, I want the new row go go under the user selected father (father3, father4, or father5)
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>
You can use the id to get the index
var row = table.insertRow(document.getElementById(id).rowIndex+1);//+1 to be inserted under
id should be index, that is: table.rows is like an Array (it's not actually an Array, but behaves like one).
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}