We Keep Coding

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

How to get data of a cell from a table using JavaScript

i am passing a very hard time with my web project.because i am new with web related languages.
i just want to get data of a cell by clicking the same row button of the other cell. i am adding a pic please see this first.
i try with many codes like below---(1st try)
my js code-
var tbl = document.getElementById("myTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
tbl.rows[i].cells[1].onclick = function (){ getval(this); };
}
}
function getval(cell) {
value(cell.innerHTML);
}
my html code
<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
<th style="width:25%;">Vendor Picture Path</th>
<th style="width:25%;">Vendor Heading</th>
<th style="width:25%;">Vendor Body</th>
<th style="width:25%;">Add courses</th>
</tr>
echo '<tr>
<td>'.$row["pic_path"].'</td>
<td style="cursor: pointer;color:red;">'.$row["heading"].'</td>
<td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
<td><button>Add</button></td>
</tr>';
my table data contains echo because i fatch the table data from my sql server.
my second try...
js code
var tb2=document.getElementById("myTable");
if(tb2 != null)
{
for(h=0;h<tb2.rows.length;h++)
{
bf=tb2.rows[h].cells[1];
tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};
}
}
function getbtval(cell)
{
alert(cell.innerHTML);
}
and html code same...
1st one work for me.but that was not my expected result.
my code success on second one result.but that fails.when i click every add button it gives me just the last value of 2nd cell last row and that is "ORACLE".
PLEASE TELL ME WHAT IS WRONG WITH MY CODE......

Problem with your code is the fact you are not binding events to the button, you are picking a random cell of the table row. And the other issue is the fact you are not using var so it makes things global.
You said you want to click the button, but your code is not selecting the button. So instead of adding events all over the place, just use one and let event delegation take care of it. Check to see what triggered the event. If it is a button, than select the row and than you can read the text of the cells.
document.getElementById("myTable").addEventListener("click", function(evt) {
var btn = evt.target;
if(btn.tagName==="BUTTON"){
var row = btn.parentNode.parentNode; //td than tr
var cells = row.getElementsByTagName("td"); //cells
console.log(cells[0].textContent, cells[1].textContent);
}
});
<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
<th style="width:25%;">Vendor Picture Path</th>
<th style="width:25%;">Vendor Heading</th>
<th style="width:25%;">Vendor Body</th>
<th style="width:25%;">Add courses</th>
</tr>
<tr>
<td>123</td>
<td style="cursor: pointer;color:red;">YYYY</td>
<td>
<div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">XXX</div>
</td>
<td>
<button>Add</button>
</td>
</tr>
<tr>
<td>456</td>
<td style="cursor: pointer;color:red;">dasdas</td>
<td>
<div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">qwwqeqwe</div>
</td>
<td>
<button>Add</button>
</td>
</tr>
</table>

cell.onclick = function (){ getval(this); };
this means "current context", that is the cell which produced the click event.
bf=tb2.rows[h].cells[1];
tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};
After the for loop, bf points to the cell in the last row, so getval(bf) returns the value of it.
To access the proper cell, do the DOM traversal as #epascarello suggests. Depending on your use-case, it also might be easier to use data attribute:
<button data-value="Cisco">
And then in the JS code
button.onclick = function() { alert(this.dataset.value); }

You need to first identify the row clicked, for this you can check which element is current clicked by adding an event listener on the entire table and check when the target is button.
Once you get the event target as button , find its parent td and its parent tr.
Now you got the tr and just loop through the child nodes, exclude the nodeType == 3 so that you only get the td element in the tr
document.getElementById("myTable").addEventListener("click",function(e){
e = e || event
var target = e.target || e.srcElement;
if (target.nodeName != 'BUTTON') return
var row = target.parentNode.parentNode;
row.childNodes.forEach(function(item){
if(item.nodeType !== 3)
{
console.log(item.textContent);
console.log(item.innerHTML);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
<th style="width:25%;">Vendor Picture Path</th>
<th style="width:25%;">Vendor Heading</th>
<th style="width:25%;">Vendor Body</th>
<th style="width:25%;">Add courses</th>
</tr>
<tr>
<td>cisco-networking.jpg</td>
<td style="cursor: pointer;color:red;">CISCO</td>
<td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">CISCO systems</div></td>
<td><button>Add</button></td>
</tr>
</table>

I've done this by assigning the td an id and grabbing the text using jquery

How to post the value of a specific cell of a table using jQuery

I'm trying to use jQuery to capture the value of two cells from a table. My table looks like this:
<table id="searchByLocationResults" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">View Detail</th>
<th scope="col">Quantity</th>
<th scope="col" style="display:none;">Location ID</th>
<th scope="col" style="display:none;">Item Type ID</th>
</tr>
#For Each item In Model
Dim currentItem = item
#<tr>
<td><a class="btn btn-default btn-sm" onclick="viewDetails(this)">View Detail</a></td>
<td>
#Html.DisplayFor(Function(modelItem) currentItem.COUNT)
</td>
<td style="display:none;" class="locationID">
#Html.DisplayFor(Function(modelItem) currentItem.Unique_Location_ID)
</td>
<td style="display:none;" class="itemType">
#Html.DisplayFor(Function(modelItem) currentItem.Item_Type_Identifier)
</td>
</tr>
Next
</tbody>
</table>
As you can see there is a 'view details' button on each row. What I need to do is capture the display:none values in the cells with class=locationID and class=itemType when the button is clicked, only for the row that the button is clicked on. I have seen multiple solutions on stack over flow here, here and quite a few others. Most of these are dealing with capturing an entire row of values.
I have tried a few different scripts:
function viewDetails(clickedRow) {
var locationID = $(this).find(".selected td:.locationID").val();
alert(locationID);
and:
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").val();
alert(locationID);
as well as a few others.
How do you capture the values of the cells locationID and itemType for the row that 'View Details' is clicked on?

I would say to try the index. This only works if the buttons and text areas have unique classes so the count works correctly. Then once you have the index use the eq() to get the data.
var index = $(".btn-sm").index();
var locationId = $(".locationID").eq(index).text();

You are almost there. You just need to use the .text() method in Jquery
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").text();
alert(locationID);

Copy data between specific <td> tags using jquery

I've a table like this:
<table>
<tr>
<td class="type">Order</td>
<td class="orderid">1002</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Order</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<td><button class="copy">Copy Row</button></td>
</tr>
</table>
I've a script to copy data from a particular "#id" or ".class" element. What, I needed is to find a way to get the data of that particular row whenever, the Copy button is pressed. I want the columns 'orderid' and 'type' values of that particular row to be copied, but I'm not able to find a way to extract the data between the <td> tags with same class names.

Simple answer:
$('.copy').click(function(){
var order_id = $(this).parent().parent().find('.orderid').text();
var type = $(this).parent().parent().find('.type').text();
alert(order_id); ///this wil get you the value
});
I made the result here: http://codepad.viper-7.com/ahsVfB
check it.

<tr>
<td class="type">Refund</td>
<td class="orderid">1004</td>
<button class="copy">Copy Row</td>
</tr>
$(".copy").click(
function(event)
{
var copy=($(event.target).parent().find('.type'));
var order=($(event.target).parent().find('.orderid'));
}
);
You must paste that copied date somewhere. Make this copy and order as global variables. When you click paste, use this variable's value

take a look on this fiddle http://jsfiddle.net/3p29x2s9/11/
var buttons=document.getElementsByClassName("copy");
console.log(buttons);
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
var columns = this.parentElement.parentElement.getElementsByTagName("td");
var type= columns[0].innerText;
var orderid=columns[1].innerText;
alert(type + " "+orderid);
}
}

Copy cell value from table to textbox

I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>

try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});​
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});​
updated demo

Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.