Javascript Get the text in a particular table cell in (this) row - javascript

I have a table that's created dynamically.
Each row have a button.
When I let on the button on a row I want it to get the text in a particular cell.
Something like this:
I have a table like this:
<table>
<tr>
<td>Test 1 Here</td>
<td>Other Text Here</td>
<td><button onclick="getData(this.cell[1].innerHtml)">Get Data</button></td>
</tr>
</table>
How can I do this using pure javascript or typescript?

I think you are trying to get the first cells text to do that you can use parentNode/childNodes to get a list of all the tds in the row and then pick the one you want by the index.
function getData(x)
{
console.log(x.parentNode.parentNode.childNodes[1].innerHTML)
console.log(x.parentNode.parentNode.childNodes[3].innerHTML)
}
<table>
<tr>
<td>Test 1 Here</td>
<td>Other Text Here</td>
<td><button onclick="getData(this)">Get Data</button></td>
</tr>
</table>

In your setup for the getData function, this will refer to the button that was clicked - buttons don't have a "cell" property.
I would suggest:
<button onclick="getData(this)">Get Data</button>
then
function getData(btn) {
var tr = btn.parentNode.parentNode; // the parent of btn is the td, the parent of td is the tr.
var td = tr.getElementsByTagName("td")[0]; // get the first TD in the TR
console.log(td.innerHTML); // log the content of the TD
}

Related

Change button text of a cloned element

Making an food ordering app. There is a first table with all items you can choose. Each item have a button. On this button click it clones the line and put it in a second table containing your chosen items. I would like to change the text content of the button when the element go to the second table. Like "+" in the first table become "-" in the second table (to next delete the item of the second table on "-" click)
HTML
<h1>CHOOSE</h1>
<table id="starters">
<tr>
<th>PRODUCT</th>
<th>PRICE</th>
<th>ADD TO CART</th>
</tr>
<tr>
<td>Cherry</td>
<td>6</td>
<td><button class="item_button">+</button></td>
</tr>
<tr>
<td>Peach</td>
<td>8</td>
<td><button class="item_button">+</button></td>
</tr>
<tr>
<td>Strawberry</td>
<td>12</td>
<td><button class="item_button">+</button></td>
</tr>
</table>
<h1>YOUR CHOICE</h1>
<table id="products_cart">
</table>
JS
let basket = document.getElementById("products_cart")
let buttons = document.querySelectorAll('.item_button');
for (button of buttons) {
button.addEventListener('click', cloneLine);
}
function cloneLine(e) {
let td = e.target.parentNode;
let tr = td.parentNode;
let clone = tr.cloneNode(true);
basket.appendChild(clone);
}
I tried different things like to get (querySelectorAll) the buttons and change their innerHTML (or textContent or innerText) with no success. I also tried to create another button and to replace the former by the newer.

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

select and unselect td inside an HTML table

I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color. I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes. I have a Fiddle here.
Here's my CSS:
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly. I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color. The fiddle above shows what is happening.
I tried adding a <tbody>, but I don't think that I did it correctly as the results did not change.
I tried adding $('.selected').removeClass('selected'); and it partly worked. I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.
The way you select siblings for td is wrong, Try this
$("#table2 tbody td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
Fiddle
It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings. The td's in this row:
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:
$(this).closest('table').find('td').not(this).removeClass('selected');
You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
jsFiddle example
Create a css style for the style of your selected cell.
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.
CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});

Not able to set the value for td element of table dynamically

I am trying to edit set the value of a column in a particular row in a table and the code is not working.
Here is what i am trying to do:
var td = document.createElement('td');
td.appendChild(document.createTextNode('hi'));
$('#tr').appendChild(td);
<tr id="tr">
<td >
Row 3
</td>
<!--- In the middle of these 2 row, i want that column that says "hi"-->
<td>
Row 3
</td>
</tr>
To append it in second position :
$('#tr td').first().after(td);
What the point of mixing native javascript with jquery ?
I would do it like that :
var td = $('<td>').text('hi');
$('#tr td').first().after(td);
Note: Only when you wrap it correctly inside a <table>, this would work.
I don't think $ is defined. So you might need to use the td.
<table>
<tr id="tr">
<td >
Row 3
</td>
<!--- In the middle of these 2 row, i want that column that says "hi"-->
<td>
Row 3
</td>
</tr>
</table>
<script>
var td = document.createElement('td');
td.appendChild(document.createTextNode('hi'));
var el = document.getElementById("tr").getElementsByTagName("td");
el[0].insertAdjacentHTML('afterend', '<td>' + td.innerHTML + '</td>');
</script>
If you are using jQuery, it is very simple, but you need to wrap your <tr> inside <table> in order for the <tr> to be displayed. Check the working snippet below:
$(function () {
var td = $("<td />", {
html: "hi"
});
$("#tr").find("td").first().after(td);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr">
<td >
Row 3
</td>
<!--- In the middle of these 2 row, i want that column that says "hi"-->
<td>
Row 3
</td>
</tr>
</table>

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>

Categories