Develop Reference

JS/jQuery: Copying Contents of td to clipboard

I'm working on a project where I have a table full of first names, last names, and e-mail addresses. The last td should be a button that allows the user to copy that particular person's e-mail address to the clipboard.
Also yes, I'm aware this is in old-school JS, I'm working on a legacy project.
Here's my code on codepen.io: https://codepen.io/anfperez/pen/ZZdwWL
HTML
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>E-mail</th>
<th>Button</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td id="email">jsmith#whatever.com</td>
<td><button>Click to Copy</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td id="email">ejackson#whatever.com</td>
<td><button>Click to Copy</button></td>
</tr>
</table>
JS
function copyToClipboard() {
var copyText = document.getElementById("email")
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
So, I have two dilemmas:
1) how can I get each button generated to copy the correct e-mail address (not just one or all of them)? I need to assign unique IDs to each entry it seems, but I don't really know how to start generating those if the list gets longer.
2) I keep getting the error that "copyText.select() is not a valid function". I've been following several tutorials in which this method is used, so I'm not sure why it's not working here.

As Robin Zigmond says, you need to change id="email" to class="email" to be able to find the correct TD, and because each id must be unique.
Once you have done that, you can add an event listener to each button programmatically, and within the listener find the email TD with the email classname.
Selecting text only works in elements that can have text input (i.e. textarea and input type="text"), so you need to create a temporary element to put the text into, and copy it from there.
(function()
{
let buttons = document.getElementsByTagName('Button');
for(let i = 0; i < buttons.length; i++)
{
let button = buttons[i];
button.addEventListener('click', e =>
{
let button = e.target;
let email = button.parentNode.parentNode.getElementsByClassName('email')[0].innerHTML;
let text = document.createElement('input');
text.setAttribute('type', 'text');
text.value = email;
document.body.appendChild(text);
text.select();
document.execCommand('copy');
document.body.removeChild(text);
});
}
})();
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>E-mail</th>
<th>Button</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td class="email">jsmith#whatever.com</td>
<td><button>Click to Copy</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td class="email">ejackson#whatever.com</td>
<td><button>Click to Copy</button></td>
</tr>
</table>

I have modified your Codepen code.
Here is a working example.
document.querySelectorAll('button[data-type="copy"]')
.forEach(function(button){
button.addEventListener('click', function(){
let email = this.parentNode.parentNode
.querySelector('td[data-type="email"]')
.innerText;
let tmp = document.createElement('textarea');
tmp.value = email;
tmp.setAttribute('readonly', '');
tmp.style.position = 'absolute';
tmp.style.left = '-9999px';
document.body.appendChild(tmp);
tmp.select();
document.execCommand('copy');
document.body.removeChild(tmp);
console.log(`${email} copied.`);
});
});
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>E-mail</th>
<th>Button</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-type="email">jsmith#whatever.com</td>
<td><button data-type="copy">Click to Copy</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td data-type="email">ejackson#whatever.com</td>
<td><button data-type="copy">Click to Copy</button></td>
</tr>
<tr>
<td>Eve1</td>
<td>Jackso1n</td>
<td data-type="email">ejackssdfon#whafdstever.com</td>
<td><button data-type="copy">Click to Copy</button></td>
</tr>
<tr>
<td>Eve2</td>
<td>Jackson2</td>
<td data-type="email">asdas#whasdftever.com</td>
<td><button data-type="copy">Click to Copy</button></td>
</tr>
</table>
This source can be helpful as well source

Check table values when loading html page with jQuery

I have recently started to use jQuery and I would like a little help, on a function that I would like to implement, in practice I have a html table in which for each row there is the course, professor, day, hour, status and a button to cancel my reservation, I initially created a small function in which when I click the button it changes the value of STATUS from ACTIVE to CANCEL and then through a post sends data to the server.
This is my code - I'm using a jsp page and I fill the columns using jstl
$(document).on('click', '.table-remove', function(e){
var row = $(this).closest('tr');
$(this).prop("disabled",true);
var col1=row.find('td:eq(0)').text();
var col2=row.find('td:eq(1)').text();
var col3=row.find('td:eq(2)').text();
var col4=row.find('td:eq(3)').text();
var col5=row.find('td:eq(4)').text();
var sessionValue= $("#hdnSession").data('value');
$.post("Serverlet_prenotazioni_disdette",{corso:col1,professore:col2,giorno:col3,ora:col4,stato:col5,user:sessionValue},
function(data){
row.find('td:eq(4)').html('Disdetta');
alert(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-hover text-center" id="table">
<tr style="background-color:#17a2b8;color:white">
<th class="text-center">Utente</th>
<th class="text-center">Corso</th>
<th class="text-center">Professore</th>
<th class="text-center">Giorno</th>
<th class="text-center">Ora</th>
<th class="text-center">Stato</th>
<th class="text-center"> </th>
</tr>
<tr>
<c:forEach var = "rip" items = "${prenotazioni}">
<tr>
<td id="account" class="pt-3-half" contenteditable="false" name="account"><c:out value = "${rip.getAccount().getNickname()}"/></td>
<td id="corso" class="pt-3-half" contenteditable="false" name="corso"><c:out value = "${rip.getRipetizione().getCorso().getNome_Corso()}"/></td>
<td id="professore" class="pt-3-half" contenteditable="false" name="professore"><c:out value = "${rip.getRipetizione().getProfessore().getCognome()}"/></td>
<td id="giorno" class="pt-3-half" contenteditable="false" name="giorno"><c:out value = "${rip.getGiorno()}"/></td>
<td id="ora" class="pt-3-half" contenteditable="false" name="ora"><c:out value = "${rip.getOra()}"/></td>
<td id="stato" class="pt-3-half" contenteditable="false" name="stato"><c:out value = "${rip.getStato()}"/></td>
<td>
<span id="table-remove" class="table-remove"><button type="button" id="button-d" class="btn btn-success" >Prenota</button></span>
</td>
</tr>
</c:forEach>
I would like to make a function in which at the time of loading the page analyzes the STATUS column and where it finds "Deleted" I must disable the button and change the color of the text "Canceled" from black to red, while where State has value "Activate" he must do nothing
I tried to do this function
$(document).load('.table-remove',function(){
var row = $(this).closest('tr');
var text=row.find('td:eq(4)').text();
if(text==="Disdetta"){
$(this).prop("disabled",true);
}
});
but doing so no longer works

Here is a reduced example showing how you can do:
// on load...
$(document).ready(function() {
// ...for each row...
$('tbody tr').each(function() {
var $statusCell = $(this).find('td:first-child');
// ...get status
var status = $statusCell.text();
// if status is "Deleted"...
if (status === 'Deleted') {
// ...disable button...
$(this).find('button').prop('disabled', true);
// ...and change text color
$statusCell.css('color', 'red');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Deleted</td>
<td>
<button>Do something</button>
</td>
</tr>
<tr>
<td>Other status</td>
<td>
<button>Do something</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Save whole table html code in a variable

I have a table where the cell content is editable.
Now I want, after I finished editing the table, the html code from the table with all values.
Here is a table:
<table class="table table-bordered content">
<thead>
<tr>
<th>bla</th>
<th>bla bla</th>
<th>bla bla bla </th>
<th>more bla</th>
</tr>
</thead>
<tbody>
<tr contenteditable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr contenteditable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button id="save">Save</button>
That's my JS code:
$('#save').on('click', function () {
var table = $('.content').html();
alert(table);
});
The problem is that if I console.log the table variable I get this output:
<thead>
<tr>
<th>bla</th>
<th>bla bla</th>
<th>bla bla bla </th>
<th>more bla</th>
</tr>
</thead>
<tbody>
<tr contenteditable="true">
<td>dwad</td>
<td>dwada</td>
<td>dawdaw</td>
<td>dawdaw</td>
</tr>
<tr contenteditable="true">
<td>daw<br></td>
<td>daw<br></td>
<td>dwadaw<br></td>
<td>daw<br></td>
</tr>
</tbody>
If you have a closer look you can see that the
<table class=" ... "> and the </table> tag are gone but I also need them.
Does someone know what I can do to also get the table-tags ?

Try this:
var table = $('.content')[0].outerHTML;
alert(table);
Should work in every browser

Use outerHTML on the node element. Like this:
$('#save').on('click', function () {
var table = $('.content')[0].outerHTML;
alert(table);
});

Use outerHTML
$('.content').get(0).outerHTML
Check the example on JSfidle

$('#save').on('click', function () {
var table = $('.content')[0].html();
alert(table);
});
This should work.

Use Element.outerHTML
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can be set to replace the element with nodes parsed from the given string.
$('#save').on('click', function () {
var table = $('.content');
alert(table.get(0).outerHTML);
});

find child table selector from parent table - jQuery

I have a table structure like this. Fairly simple one.
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.
Now on clicking the row again, I want to be able to remove the newly added row(the new table).
I am using bootstrap table.
Here is what I have tried so far.
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//if ($element.has('#newlyAddedTable').length) { ....// did not work
if ($('#myTable').has('#newlyAddedTable').length) { // this removes the table on any row click. Not what I intend to do
{
$("#newlyAddedTable").remove();
} else {
// some operation...
}
}
I want to be able to remove the newly added table on the row it was created.
Just more explanation based on the Answers below:
<tr> ----------> if i click this
<td>
<table id="newlyAddedTable"> ---------> this is added
</table>
</td>
</tr>
<tr> ----------> if i again click this or maybe any other row in the table
<td>
<table id="newlyAddedTable"> ---------> this is removed
</table>
</td>
</tr>

Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:
Just change:
$('#myTable').has('#newlyAddedTable').length
To:
$('.newlyAddedTable', $element).length //element === clicked row -- see demo
vvvvv DEMO vvvvv
$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
if( $('.newTable', $element).length ) {
$('.newTable', $element).remove();
} else {
$('td:first', $element)
.append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>

Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
$(this).remove();
});
The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in #VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
<td>
<table id="newlyAddedTable">
</table>
</td>
</tr>
Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.
You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:
$(document).on("click", "tr:has(#newlyAddedTable)", function(){
You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:
$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()

As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?
$('#add').on('click', function()
{
var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test#example.com</td></table></td></tr>'
$('#myTableBody').append(newRow);
Remove()
});
function Remove()
{
$('.newrow').off('click').on('click', function()
{
$(this).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button type='button' id='add'>Add</button>
Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()
the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.

how to get values of columns for a selected row through jQuery on click of element calling method to retrieve value

here i am trying to fetch values of a particular column for a selected row via jquery.In Following code i have two rows which do not have any id.I tried following way and getting both rows value for that column appending each other.how to get value for that row only using jquery only.I want to call test function on click of that element, dont want to use http://jsfiddle.net/SSS83/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function test(){
var id = $(".use-address").closest("tr").find('td:eq(2)').text();
alert(id);
}
</script>
</head>
<body>
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glas</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
<tr>
<td class="nr"><span>30</span>
</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Not sure why you don't want to use jQuery Click event!!
Any way, if you want to stick with your test function, you need to tell the function from where it got called.
so change the
<button type="button" class="use-address" onclick="test();">Use</button>
to
<button type="button" class="use-address" onclick="test(this);">Use</button>
And update your test function as
function test(el) {
var id = $(el).closest("tr").find('td:eq(2)').text();
alert(id);
}
Enjoy!!
If you change your mind you can use the following code
jQuery('document').ready(function() {
jQuery('.use-address').on('click',function() {
var id = $(this).closest("tr").find('td:eq(2)').text();
alert(id);
})
});

Based on a click of a TD:
$('td').on('click',function() {
//get the column of the TD
var myCol = $(this).index();
//loop through the rows of this table, get the TD in the same column
$(this).parent('table').find('tr').each(function() {
var colValue = $(this).find('td').eq(myIndex).html()
}
})
"colValue" in the loop will grab the contents of the TD at that position.