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

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>

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?

You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle

simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

javascript get external table row on click

I have a button:
<button id="external-list-row">Test</button>
in which I would like to change with a row from an external table on click. The external table is structured like this;
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>
So my question is this; how can I replace "Test" in the button with the content of Row 1 with javascript?
As for the javascript, I'm not sure how I can get the content from row 1, and replace the button with it.
<script>
var rows = document.getElementById('table_id').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
$('#external-list-row').onclick = function() {
}};
</script>
Post comments:
I can access table data from other tables within the same html file, but I still don't know how to access data from tables in other html files. For example, if I try to access a videos liquid file from another liquid file, like photos, nothing happens when I press the button.
Fiddle of current code. It can replace the content of a list with the content of another, but the lists need to be on the same html file.
https://jsfiddle.net/hgnymydL/

Well, the first thing you should understand, is that a table element has a rows property, so getting the first row is trivial.
var table = document.getElementById("table_id");
var firstRow = table.rows[0];
From there, you can use textContent to get the text content of the row. I believe that's what you were looking for.
You can also select the first row of a table with a CSS selector like so:
var firstRow = document.querySelector("#table_id tbody tr");

$('#external-list-row').on('click', function() {
$(this).text($('#table_id tbody tr:first').text());
});

If you want to replace the button text with contents of the First Row ONLY then:
$('#external-list-row').html($('tr:first-child').html);
Of course you could wrap this in any event, so for example, on clicking the button:
$('#external-list-row').on('click', function() {
$(this).html($('tr:first-child').text());
});
BUT, based on the code you have given, I'm assuming you want to change the text after each click in which case you could do this:
var clickNumber = -1;
$('#external-list-row').on('click', function(event) {
clickNumber = clickNumber + 1;
//console.log('\n\nclickNUmber' + clickNumber);
$('tbody tr').each(function(index, el) {
//console.log('index: ' + index);
var block = $(el).find('td p');
if(index == clickNumber) {
//console.log('entered if')
//console.log(block.text());
//console.log('----clickNUmber' + clickNumber);
//console.log('index: ' + index);
//console.log(el);
$('#external-list-row').html(block.text());
}
});
});
jsFiddle: https://jsfiddle.net/zmb2b37t/
Hope that helps!

If you are wanting to replace the visible text "Test" in the button with the content of the cell clicked:
var tbl = document.getElementById('table_id');
var btn = document.getElementById('external-list-row');
tbl.onclick = function(ev){
var trgt = ev.target;
if(trgt.tagName === 'P' ||trgt.tagName === 'TD'){
btn.textContent = trgt.textContent;
}
};
Only one event handler is attached in this scenario.
Via event delegation we determine if it was a TD or P element that was clicked. If the rows are modified the function will still work.

Here is jquery code of do this
$('#table_id tr td').on('click', function(){
$('#external-list-row').html($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="external-list-row">Test</button>
<table id="table_id">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Row 1</p>
</td>
</tr>
<tr>
<td>
<p>Row 2</p>
</td>
</tr>
<tr>
<td>
<p>Row 3</p>
</td>
</tr>
</tbody>
</table>

Getting innerHTML of an element by clicking another element that comes after it

So I have a table with a few rows each tr has 3 td's that each has a class; "td1", "td2" and "td3", td3 has a <span> inside it which acts as a link like this:
<table>
<tr>
<td class="td1">This is td number 1 in row 1</td>
<td class="td2">This is td number 2 in row 1</td>
<td class="td3">This is td number 3 in row 1<span class="clickMeLink">Click me</span></td>
</tr>
<tr>
<td class="td1">This is td number 1 in row 2</td>
<td class="td2">This is td number 2 in row 2</td>
<td class="td3">This is td number 3 in row 2<span class="clickMeLink">Click me</span></td>
</tr>
</table>
$('.clickMeLink').on('click', function () {
});
Is there a way for me to get the innerHTML of td2 that is beofore the clicked <span>.
So if I click the <span> in row 1 I would get the innerHTML of the td2 in row 1. I would like to store the resulting innerHTML in a variable that I can use in another function.
I hope this made sense.
Thanks

Fiddle Demo
$('.clickMeLink').click(function () {
var txt = $(this).parent().prev().html();
// ^ parent of current element and than gets it's previous td
alert(txt);
});
this keyword
.prev()
.parent()

$('.clickMeLink').on('click', function(){
$yourtd = $(this).parents('tr').find('.td2');
console.log($yourtd);
})