javascript get external table row on click - javascript

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>

Related

Select only one table cell per row and column

I have the following table:
<table border="1" cellpadding="5" class="test">
<tr>
<td id="1">aaa</td>
<td id="2">bbb</td>
<td id="3">ccc</td>
</tr>
<tr>
<td id="4">ddd</td>
<td id="5">eee</td>
<td id="6">fff</td>
</tr>
<tr>
<td id="7">ggg</td>
<td id="8">hhh</td>
<td id="9">iii</td>
</tr>
</table>
The condition should be that you can only select one table cell per row and column.
At the moment my script is managing that only one selection per table column is possible, but how can I add additionally that only one cell per table row is selectable, too.
This is my script and the JS Fiddle:
$(document).on("click", ".test td", function() {
let index = $(this).index()+1;
$(this)
.closest('table')
.find('tr>td:nth-child('+index+')')
.removeClass('selected');
var col1 = $(this).addClass('selected').text();
});
remove all the active class in the clicked row. Insert the following row to your code
$(this).closest('tr').find('td').removeClass('selected');
So,
$(document).on("click", ".test td", function() {
let index = $(this).index()+1;
$(this)
.closest('table')
.find('tr>td:nth-child('+index+')')
.removeClass('selected');
$(this).closest('tr').find('td').removeClass('selected'); // remove 'active' class of the row
var col1 = $(this).addClass('selected').text();
});
A solution for select "one cell per table row"
$(document).on("click", ".test td", function() {
let index = $(this).index()+1;
console.log(index)
$(this)
.closest('tr').children('td')
.removeClass('selected');
$(this).addClass('selected')
});

how to hide a table row in html here the condition as row values using javaScript ? If two row values are the same then hide one

I have a html table where I need to hide one row where column value is same. like if key1 and key2 have same value then hide one row.
here each row is different, in that there are two dates whose value may be same sometimes in that case i should hide one row. the data are comming in html in json format. here duplicate does not mean that two rows are completely same, no there values are same.
<html>
<header>Hide Test</header>
<body>
<pre>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value3</td>
</tr>
</pre>
</body>
</html>
You can loop over all rows, save found values in an array and if a value is already in an array you will hide it instead.
var rows = document.querySelectorAll('table tr');
var foundValues = [];
rows.forEach(function(el){
console.log(foundValues);
console.log(el.children[1].innerHTML);
if(foundValues.includes(el.children[1].innerHTML)) {
el.style.display = 'none';
}
else {
foundValues.push(el.children[1].innerHTML);
}
});
<table>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value2</td>
</tr>
<tr>
<td>Key4</td>
<td>Value4</td>
</tr>
</table>
Assuming the value will always be in the second field of each row I have a solution here which should work.
//we need to check that the window has loaded so we can target the elements in the DOM.
window.onload = function(){
var seen = [];
var tableRows = document.getElementsByTagName('tr');
for(i = 0; i < tableRows.length; i++){
//get the table data for this particular table row
var tableData = tableRows[i].getElementsByTagName('td');
//the value will be contained in the second td tag of the row so we retrieve it as follows:
var value = tableData[1].innerText;
//log the value to check.
console.log(value);
if(seen[value]){
//if the value already exists hide the table row that contains this value.
tableRows[i].style.display = "none";
}else{
//add the value to the 'seen' array.
seen[value] = true;
}
}
}
You can test this with the following table where two values are the same.
<!DOCTYPE html>
<html>
<head>
<title>Hide test</title>
<script>
//javascript code goes here
</script>
</head>
<body>
<table>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
<tr>
<td>Key3</td>
<td>Value1</td>
</tr>
</table>
</body>
</html>

Get tbody next to one below the current tbody

I have a SharePoint table and would like to get the tbody of the table right one below the tbody with groupstring.
Sample table
<tbody groupstring=“%3B%23Application%3B%23”>
<tr><td> : Application </td></tr></tbody>
<tbody></tbody>
<tbody>
<tr><td><a href=“https://link1.com”>Link 1</a></td></tr>
<tr><td><a href=“https://link3.com”>Link 3</a></td></tr>
</tbody>
I will be getting another link Link2 from Json and dynamically inserting it between Link1 and Link3 with Jquery
var addRow=function(url,displayName){
Var counter=0;
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
counter++;
If($(this).find(‘td:eq(0)’).text() > displayName){
$(this).before(makeRow(url,displayName));
} else {
If($(this).find(‘td:eq(0)’).text() === displayName){
$(this).html(makeRow(url,displayName));
Return false;
}}
If($(this).closest(‘table’).find(‘td.md-vb2’).length === counter){
$(this).parent().after(makeRow(url,displayName));
}
});
};
Var makeRow = function(url,displayName){
return (‘<tr><td><a href=“‘ + url + ‘”>’+displayName+’</a></td></tr>’);
};
I am trying to add the dynamic Link2 between Link1 & Link3 as anchor by placing in between or replace if already exists by addRow function.
My problem is that I can insert in the tbody after the tbody with groupstring but I want to insert in tbody one after the blank tbody.
Can somebody help modify:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
To access/get the tbody* one after the blank tbody?
I even tried:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).next(‘tbody’).find(‘td’).each(function(){
And
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).closest(‘tbody’).find(‘td’).each(function()
But it did not work.
Any help is much appreciated.
$('tbody[groupstring]').nextAll('tbody:eq(1)') should do it.
Demo:
$(function() {
var $target = $('tbody[groupstring]').nextAll('tbody:eq(1)');
console.log($target.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody groupstring="%3B%23Application%3B%23">
<tr>
<td>Application</td>
</tr>
</tbody>
<tbody></tbody>
<tbody>
<tr>
<td>Link 1</td>
</tr>
<tr>
<td>Link 3</td>
</tr>
</tbody>
</table>
Also note that groupstring is not a valid HTML attribute.

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 the text value of the row that was just deleted-Jquery/Js

I have a Delete link on clicking of which deletes the row in a table.
<table id="cont">
<tbody>
<tr>
<td>
<label>account name</label>
</td>
</tr>
<tr>
<td>
<label>type</label>
</td>
</tr>
<tr>
<td><a class=delete href='/url/delete'>Delete</a></td>
</tr>
</tbody>
</table>
here is the js im trying to find the row that i just deleted:
$('.delete').on('click', function(e) {
var $this = $(this);
$this.parent().remove();
//how to get the <tr> that just deleted
alert("deleted" +tr-value-deleted);
});
any ideas appreciated!!
Thanks..
I don't know what you mean by value, bit if you mean the innerHTML, you can first store it and then delete the element.
var deleted = $this.parent().html();
$this.parent.remove();
alert("deleted " + deleted);
It depends what you want as the 'value' mate!
if you want the id of the table you would do
$(this).closest('table').attr('id');
If you want account id or type you could easily do
$(this).closest('table').find('lable');
which should give you an array with the two elements inside
You can cache the cell first and get the outerHTML later.
$('.delete').on('click', function(e) {
var $p = $(this).parent();
$p.remove();
//how to get the <tr> that just deleted
alert("deleted " + $p[0].outerHTML);
});
Fiddle here.

Categories