I cannot get my edit button to execute on a click.
Here's my HTML:
<table id="example" class="display" style="width:100%">
<thead><tr><th>First Name</th><th>Last Name</th><th>Email Address</th><th>Actions</th></tr></thead>
<tbody>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
</tbody>
<tfoot><tr><th>First Name</th><th>Last Name</th><th>Email Address</th><th>Actions</th></tr></tfoot>
</table>
And here is my Javascript:
<script type="text/javascript">
jq(document).ready(function() {
jq('#example').DataTable( {
"ajax": basePath + '/'+localeCodeShort +'/users/api/get-users',
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button type='button' class='btn btn-info smallPadding edit'>Edit</button> <button type='button' class='btn btn-success smallPadding'>Export</button> <button type='button' class='btn btn-danger smallPadding'>Delete</button>"
}]});
jq("#example tbody button.edit").on("click",function(){alert("hi");});
});
</script>
For what it's worth, this seems to be working.
jq = $;
jq(function() {
jq('#example').DataTable({
// "ajax": basePath + '/'+localeCodeShort +'/users/api/get-users',
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent": "<button type='button' class='btn btn-info smallPadding edit'>Edit</button> <button type='button' class='btn btn-success smallPadding'>Export</button> <button type='button' class='btn btn-danger smallPadding'>Delete</button>"
}]
});
jq("#example tbody button.edit").on("click", function() {
alert("hi");
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js">
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">Someone</td>
<td>Foryou</td>
<td>someadd#gmail.com</td>
<td><button type="button" class="btn btn-info smallPadding edit">Edit</button> <button type="button" class="btn btn-success smallPadding">Export</button> <button type="button" class="btn btn-danger smallPadding">Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
Related
I need help in sending the value of the button (yes, no or maybe) from the form.html to the table cell "attending" in table.html.
If the user clicks the "Yes" button, the yes value will insert into the attending table cell. Same for the other buttons pressed on the form.html to the table.html page.
How would I implement this?
My form.html:
<form method="post" action="savedConnections.html" id="add">
<p>Would you like to attend this event?</p>
<button class="btn btn-success" onclick="addValue();">Yes</button>
<button class="btn btn-info" onclick="addValue();">Maybe</button>
<button class="btn btn-danger" onclick="addValue();">No</button>
</form>
My table.html:
<div class="table">
<table class="table" id="tableEdit">
<thead>
<tr>
<th>Connections</th>
<th>Category</th>
<th id="attending">Attending?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Releasing Sea Turtles back to the Ocean</td>
<td>Volunteer Trips</td>
<td class="r1"> </td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
<tr>
<td>Learning about Sea Turtles</td>
<td>Educational Programs</td>
<td class="r2"> </td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
<tr>
<td>Protect the Sea Turtles</td>
<td>Fundraisers</td>
<td class="r3"></td>
<td><button type="button" class="btn btn-info" style="margin:5px;">Update</button>
<button type="button" class="btn btn-danger" value="delete" style="margin:5px;" onclick="deleteRow(this.parentNode.rowIndex)">
Delete </button></td>
</tr>
</tbody>
</table>
</div>
I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here are the 2 scripts that I would like to run when the Select button is clicked in either table (first script for the top table and 2nd script for the 2nd table):
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateAccessories.php', {
itemID: itemID
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
if ($this.closest('tr').hasClass("success")) {
$this.closest('tr').removeClass("success");
} else {
$this.closest('tr').addClass("success");
}
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
At the moment clicking either button runs both scripts which I can understand as they both meet the criteria for:
$('button.btn-success:not([type="submit"])').click(function() {
but I'm not experienced enough to know how to make the necessary changes to have each button run a different script here?
A very basic way to differentiate between buttons would be to add an attribute called "id" to them.
<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>
Now you can reference each like this:
$('#button1').click(function() { ...
$('#button2').click(function() { ...
If you can change the markup then add a class from main and another for accessories in the button and do $('button.main') and $('button.accessories') instead of $('button.btn-success:not([type="submit"])')
If not then you need to be able to discern one from another.
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function(e) {
var t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
if(t.indexOf("Main") !== -1) {
// Has MAIN - put your main code in here
console.log("main stuff");
} else if (t.indexOf("Accessories") !== -1) {
// It's Accessories - put your accessories code in here
console.log("accessories stuff");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?
Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>
I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).
I am trying to insert a dynamic row in a table. Apparently, I was able to add input rows but I am unable to add a new row for button <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>. It gives an error of Uncaught SyntaxError: missing ) after argument list
<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
<br>
<thead>
tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1
</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tfoot>
</tfoot>
</table>
Javascript
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
});
</script>
use this , you put " instead of '... and in html check row <tr> but showing tr>
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td> <td class='text-center'><a class='btn btn-info btn-xs' ><span class='glyphicon glyphicon-edit'></span> Select</a> </td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
Try to keep your " and ' clean. You have a lot of them mixed up
var i = 1;
$('#add_row').click(
function(){
$('#addr'+i).html('<td>' + (i+1) + '</td><td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span>Select</a></td>');
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1
</td>
<td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>
</tr>
<tr id="addr1"></tr>
</tbody>
<tfoot>
</tfoot>
</table>
<button id="add_row">Add Row</button>
I need to get the text in <tr>. This is my html code:
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente"><tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr></tbody>
</table>
I need to extract the first <td> in <tr> that is "prova" in this example so I use this jquery code:
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+JSON.stringify($(this)));
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
But it doesn't work because it prints me TABELLA 0 Tabella {"0":{},"context":{},"length":1}
Anyone can help me?
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+$(this).first().text());
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>
You should use a better selector instead of children. Then you need do select the td inside your each.
$('#tbody_aggiungi_utente tr').each(function(i) {
var firstTd = $("td:eq(0)", this);
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify(firstTd.text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
Or you loop the td's directly:
$('#tbody_aggiungi_utente tr td:first-of-type').each(function(i) {
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify($(this).text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr id="aggiungiprova">
<td>prova 2</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
replace each(function(i) with each(function(i,v) and then console.log( $(v).text().trim());
Output will be 'prova'
$('#tbody_aggiungi_utente').children('tr').each(function(i,v) {
console.log( $(v).text().trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm">
<i class="fa fa-times" aria-hidden="true"></i></button>
</td>
</tr>
</tbody>
</table>
Use children.
$(this).children('td:eq(0)').html());
$('#tbody_aggiungi_utente > tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+
" Tabella "+JSON.stringify($(this).children('td:eq(0)').html()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
<tr id="aggiungiprova1"><td>prova1</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>
Take a look at CSS Selectors. jQuery can select elements using the same methods.
console.log(jQuery("#aggiungiprova td:first-child"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
This should work...
a = $('#tabella_username_aggiunti tr th')
console.log(a.text())
//or
a.each(function(a, el) {
console.log($(el).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
$("#aggiungiprova td").first().text();
Gives the content of the first td in the tr named "aggiungiprova".
If you need to get all names in the entire list, then:
var names = [];
$("#tabella_username_aggiunti tr").each(function(){
names.push( $("td",this).first().text());
});
// names is now an array of all names
Or you name [sic] all name TDs with class and iterate them for easier-to-read code and faster execution:
<table>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
</table>
JS:
$('.name-cell').each(function(){
// $(this).text()
});