We Keep Coding

Click a link in a table row based on text in that row

I have a table which has multiple rows and a link on the end.
I want to click on the link in the row which has the text I'm looking for. Example:
<table class="repeater large">
<tbody>
<tr>
<td headers="Cardholder ID" nowrap="nowrap">1234</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Closed</td>
<td headers="Card Last Four">1234</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
<tr class="alternaterow">
<td headers="Cardholder ID" nowrap="nowrap">5555</td>
<td headers="Cardholder Name">JONATHAN</td>
<td headers="Client Name">Some Company</td>
<td headers="CardStatus">Active</td>
<td headers="Card Last Four">555</td>
<td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
</tr>
</tbody>
</table>
I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.
I've tried breaking down the table into a array and getting the specific child number.
I was trying to create a way to get to that specific link in the table.
function getLinks() {
var links = document.querySelectorAll('#page > table');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('id');
});
}
I simple need to get that link on the row of my choice.

You could iterate over the table rows then get the id from the first element.
If the text equals the ID you are looking for then get the last element and click();
var rows = document.querySelectorAll('table tbody tr');
[].forEach.call(rows, function(tr) {
var td = tr.querySelector('td:first-child');
if (td.innerText === '5555')
tr.querySelector('td:last-child').click();
});
See the fiddle here

How to get the content of first cell of a table using jquery if table is made using Thymeleaf

The table being made dynamically using Thymeleaf. Each row of the table has a img link attached to it. On the click of which I want to get the selected rows img link first , second and third cell.
Relevant Table Code
<table class="table" id="tblDocType" style="padding: 20px 10px;">
<thead class="thead-dark">
<tr>
<th scope="col"> <b> Document Type </b></th>
<th scope="col"> <b> Practice Area </b> </th>
<th scope="col"><b> Retention Policy </b></th>
<th scope="col"> <b> Effective Date<br> Required </b></th>
<th scope="col"> <b> Termination Date<br> Required </b></th>
<th scope="col"> <b> Action</b></th>
</tr>
</thead>
<tr th:each="doctype,iterStat : ${dlist}">
<td th:text = "${doctype?.doctypes}"></td>
<td th:text = "${doctype?.practiceAreaId}"></td>
<td th:text = "${doctype?.retention_policy}"></td>
<td th:text = "${doctype?.effectiveDateRequired}"></td>
<td th:text = "${doctype?.terminationDateRequired}"></td>
<td>
<a href="#" th:name="${doctype?.practiceAreaId}" th:id="${iterStat.index}" onclick="deleteTrigger(this.id)" style="color: blue;">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</table>
I am trying to get the cell values using jquery.
Relevant jquery code
function deleteTrigger(id){
var value=$("#tblDocType").closest("tr").find('td:eq(0)').text();
console.log("value=",value);
var doctypesjson={
"doctypes": id,
"practiceAreaId": pracaticeareaidfrombutton
};
}
In the console the value is coming blank.
Please help me if you know what can be done for the problem. Thank you in advance

Presently, it appears that your code is looking for the first TR, then within that the first TD. However, this won’t do anything as your first TR only contains TH.
In calling your deleteTrigger() function, you should pass through the element that was clicked
deleteTrigger(this); // use this for your TR lookup.
However, since you’re using jQuery already, it may make your life easier to abandon the delete function altogether and use a listener;
$(“tr”).click(function(){
$(this).find(“td”).first() // this will get the first td of a clicked row
$(this).find(“td”).eq(1) // this will get second td etc...
})

Jquery: add iteration index to the name of the class of child/parent <divs> dynamically

I have a html page that has, 3 div with class name as "xyz", Now, On page load ($(document).ready(function()) for each occurance of the div "xyz" I want to introduce an inner html/child element as "<div class="childxyz###"></div>" where ### represents the position number of the occurrence of parent class xyz . For instance, the first occurrence of parent class xyz the child class name would be "childxyz1", second occurrence it would be childxyz2 and so on.
Can someone suggest a simple solution for this?
Initial page
<div class="xyz">
//appending inner html and pass value 1 as xyz is the first occurrence
</div>
<div class="xyz">
//appending inner html and pass value 2 as xyz is the first occurrence
</div>
<div class="xyz">
//appending inner html and pass value 3 as xyz is the first occurrence
</div>
The final page when the Jquery/JS script runs should look like this.
<div class="xyz">
<div class="childxyz1">
</div>
</div>
<div class="xyz">
<div class="childxyz2">
</div>
</div>
<div class="xyz">
<div class="childxyz3">
</div>
</div>
<div class="xyz">
<div class="childxyz1">
</div>
</div>
<div class="xyz">
<div class="childxyz2">
</div>
</div>
<div class="xyz">
<div class="childxyz3">
</div>
</div>
EDIT
I have included a sample code that I am working on, here I wish to replace the hard-coded value at the 0th and 1th position with a better code. Appreciate any help in this regard.
.datatableTesting0 thead tr th
.datatableTesting1 thead tr th
** What i want to achieve is a 2 Dimensional array that stores the values, such that, at the 0th position it store the content of first occurrence of class="datatableTesting" and at the 1th position the second occurrence of table with the same class name, so on and so forth.
$(".datatableTesting").each(function(i) {
$(this).addClass("datatableTesting" + i);
});
var tableArray2 = new Array(10);
var tableArray1 = new Array(10);
$('.datatableTesting0 thead tr th').each(function(i) {
var cellText = $(this).html();
tableArray1.push(cellText);
});
$('.datatableTesting1 thead tr th').each(function(i) {
var cellText = $(this).html();
tableArray2.push(cellText);
});
$('.test1').each(function(i) {
var cellText = $(this).html(tableArray1);
});
$('.test2').each(function(i) {
var cellText = $(this).html(tableArray2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="datatableTesting" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
</tbody>
</table>
<table class="datatableTesting" cellspacing="0" width="100%">
<thead>
<tr>
<th>Last name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nixon</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
<table class="test1" cellspacing="0" width="100%"></table>
<table class="test2" cellspacing="0" width="100%"></table>

allNodes = document.getElementsByClassName("xyz");
for(var i=0;i<allNodes.length;i++){
newNode = document.createElement("div");
newNode.className = "childxyz" + (i+1);
allNodes[i].appendChild(newNode);
}
this?

I did something like this (2D iteration.) for this custom requirement.
for (outerloop=0; outerloop < count; outerloop++){
columns=0;
var columns = $(".datatableTesting"+outerloop+" tr")[0].cells.length;
tableCount[outerloop]=new Array(columns);
$(".datatableTesting"+outerloop+" thead tr th").each(function(itrCol) {
var cellText = $(this).html();
//fillvalue in the 2 Dimensional array
tableCount[outerloop][itrCol]=cellText;
});
createDOMStr[outerloop] //initialize to empty str.
for (innerloop=0; innerloop < tableCount[outerloop].length; innerloop++){
// append the string that you want to display
createDOMStr[loopiter] = createDOMStr[loopiter] +//append the DOM string one row at at time.
}
}

How to get row id from row Index in table using JavaScript

Suppose this is my table:
<table>
<tr id="a">
<TD>a</TD>
</tr>
<tr id="b">
<TD>b</TD>
</tr>
</table>
How can I get row id using the row index from a table?
Above is just an example where id is static but in my case my id is dynamic, so I can't use
document.getElementById().

Assuming you have only one table on your page:
document.getElementsByTagName("tr")[index].id;
Preferably though, you'd give your table a id, though, and get your row like this:
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
var table = document.getElementById("tableId");
var row = table.rows[index];
console.log(row.id);
This way, you can be certain you don't get any interference, if you have multiple tables in your page.

"So, How can i get row id using row Index from a table"
You would select the table, and use the .rows property to get the row by index.
var table = document.getElementsByTagName("table")[0]; // first table
var secondRow = table.rows[1]; // second row
Then you just get the ID in the typical manner.
console.log(secondRow.id); // "b"
DEMO: http://jsfiddle.net/MErPk/

Answer has been edited
With CSS3 you can use the nth-child selctor. Here the example shows the rowIndex = 2
alert(document.querySelector("table tr:nth-child(2)").id);
In jQuery you can do this with
alert($("table tr:nth-child(2)").attr('id'));
The same syntax nth-child() can be used in CSS
<style>
tr:nth-child(2) {
color: red;
}
</style>

jQuery's Order of Insertion for .before() vs. .after()

I'm trying to load in an element created with jQuery to a table. The problem is, this dynamically-created element need to be inserted after another element (the <th>) so that the table retains a nice design. When using .after(), my element is inserted in to the table and the table design looks good, but the data I'm using appears in the opposite order than if I use .before() to insert. Why am I seeing opposite behavior with .before() / .after()?
Edit: .before() gives me the correct order of insertion for the interest rates, but it inserts the elements before the , so the table cols/rows do not line up. .After() gives me the opposite insertion for the interest rates, but the elements are added after that , so the the table retains its rows/cols.
Here's my code as my explanation probably isn't very clear:
<form id="form">
<label for="interestInput" id="interestRateLabel">Enter interest rate</label>
<input id="interestInput" name="interestRate" type="text">
Add another interest rate<br /><br />
<label for="loanAmtInput" id="loanAmtLabel">Enter loan amount</label>
<input id="loanAmtInput" name="loanAmt" type="text">
<button onclick="doCalculation(); return false;">Calculate!</button>
</form>
<div id="standard">
<h1>Standard Repayment</h1>
<table width="600px;" border="1" cellspacing="0" cellpadding="0">
<th scope="col"> </th>
<tr id="totalMonths">
<th scope="row">Total months</th>
</tr>
<tr id="paymentPerMonth">
<th scope="row">Payment/mo</th>
</tr>
<tr id="totalPayment">
<th scope="row">Total payment</th>
</tr>
</table>
</div>
<div id="extended">
<h1>Extended Repayment</h1>
<table width="600px;" border="1" cellspacing="0" cellpadding="0">
<th scope="col"> </th>
<tr id="totalMonths">
<th scope="row">Total months</th>
</tr>
<tr id="paymentPerMonth">
<th scope="row">Payment/mo</th>
</tr>
<tr id="totalPayment">
<th scope="row">Total payment</th>
</tr>
</table>
</div>
<div id="graduated">
<h1>Graduated Repayment</h1>
<table width="600px;" border="1" cellspacing="0" cellpadding="0">
<th scope="col"> </th>
<tr id="totalMonths">
<th scope="row">Total months</th>
</tr>
<tr id="paymentPerMonth">
<th scope="row">Payment/mo</th>
</tr>
<tr id="totalPayment">
<th scope="row">Total payment</th>
</tr>
</table>
</div>
And, here's the relevant JS:
var doCalculation = function() {
$("div#standard table tbody th.rates, div#standard table tbody tr#totalMonths td, div#standard table tbody tr#paymentPerMonth td").remove();
var loanAmount = document.getElementById("loanAmtInput");
$("input[name=interestRate]").each(function(i){
var num = parseInt( $(this).val(), 10 );
var totalMonths = num * 3;
var paymentPerMonth = num + (1/2);
var totalPaymet = num * 120;
console.log(i + "=" + num);
$("div#standard table tbody th[scope=col]").before("<th class=rates>" + num + "% interest rate</th>");
$("div#standard table tbody tr#totalMonths").append("<td>" + totalMonths + "</td>");
$("div#standard table tbody tr#paymentPerMonth").append("<td>" + paymentPerMonth + "</td>");
});
};

It goes in in opposite order because JQuery does each in turn - so in one case, it's running before() on each element, and in the other it's running after(). The way to get the thing you actually want is to start at the <th>, grab next(), and then run before() on that. If you don't have (or might not have) any elements after the <th>, then create a dummy element, insert it after() the <th>, insert the elements you want to insert before() the dummy element, and then delete the dummy element.

If I understand where your confusion is, it's because .before() and .after() work in opposite of each other.
From jQuery API docs:
.before() - Inserts content, specified by the parameter, before each
element in the set of matched elements.
.after() - Inserts content, specified by the parameter, after each
element in the set of matched elements.
Read more at http://api.jquery.com/