Fetch the row from html table on button click - javascript

So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.
Below is the html code for table
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData()">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
So, when I click update, i want to fetch "J001" (first column of the update button row).
I tried below, but it's not fetching.
function updateData(){
var $item = $(this).closest("tr")
.find(".nr")
.text();
alert($item);
}
Any help or suggestion will be appreciated.

You have to pass this in your update function call,
Your Html should be,
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData(this)">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
Jquery function should be,
function updateData(e){
var $item = $(e).closest("tr")
.find("td:first")
.text();
alert($item);
}

Related

How to update a td value from a table with id using jQuery

I am trying to work out how to update the value of the table cell for each row using jQuery.
I basically update the td#11_p value from the table, but it's not updated. I tried following jQuery,
$('#test').click(function() {
var oldprirce = $("#11_p").val();
$("#11_p").val(+(oldprirce) + +(15));
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
https://jsfiddle.net/SathishNcc/1dusLhrv/16/
Only form control elements have a value property. td elements just have text or HTML content which can be read and updated.
Given your goal of wanting to add 15 to the current integer in the cell you can provide a function to text() which accepts the current content as a string argument, convert it to a float (as it's a price) and then add 15 to it before returning it to the function for it to update the DOM. Try this:
$('#test').click(function() {
$("#11_p").text((i, t) => parseFloat(t) + 15);
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
You could change $("#11_q").val(); to $("#11_q").html();

How to refresh DataTables sort and filter info

For simplicity of the example I have a DataTable which I load from HTML.
This DataTable is having parts of its content updated through jQuery BUT the updated content while visible in the table, does not reflect when sorting or filtering.
See html code below
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
and javascript
$(document).ready(function() {
var dt = $('#example').DataTable({});
$("#entry2_votes").text(60);
});
So if you try sorting Votes column or try filtering by the new value 60 set through jQuery it wont work
See this working example https://jsfiddle.net/bpali/d97bpqvs/3/
Obviously, my question is how to make it work as in my real life situation I have to update parts of the DataTable constantly through different Ajax requests of different page sections and I cannot just put an ajax source on the table and reload the table.
This is the correct way:
$(document).ready(function() {
var dt = $('#example').DataTable({});
dt.cell( $("#entry2_votes") ).data(60) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/HappyiPhone/d97bpqvs/7/
Check online demo
You have to reinitialize data table after updating with jquery or you can update by datatable in-built methods/api
$('#example').DataTable().destroy();
$('#example').DataTable().draw();

Get all <tr> ID in table?

I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.
Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>

jQuery live filtering, how do I return entire rows when matched?

I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.
As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>

Traversing DOM in a table

I have an HTML table that has a delete button in each row of its last column. By clicking on one of these buttons, I would like to be able to delete the whole row in which it is situated. The follow code deletes the button itself but I am unable to get it to delete the whole row:
var bns = document.getElementsByTagName("button");
for (var i = 0; i < bns.length; i++) {
bns[i].addEventListener("click", function()
{
this.parentNode.parentNode.removeChild(this);
});
}
My HTML looks like:
<body>
<table class="table">
<thead>
<tr>
<th>Students</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button>X</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button>X</button></td>
</tr>
</tbody>
</table>
I think it's the removeChild(this) that's the problem. That's being called on the <tr> but it's telling it to delete this which is the button.
Try:
var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
Alternatively with a framework such as jQuery it would be:
$(this).parent().parent().remove();
Edit
The complete jQuery code is actually nice and short, too:
$(document).ready(function(){
$('button').click(function(){
$(this).parents('tr').remove();
});
});
You can use HTMLTableElement.deleteRow()to delete a HTML table row. I have added an onclick event to each button and it will call deleteRow function which uses rowIndex & deleteRow().It do not require jquery to perform the action
HTML
<table class="table" id="table">
<thead>
<tr>
<th>Students</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button onclick="deleteRow(this)">X</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john1#doe.us</td>
<td><button onclick="deleteRow(this)">X</button></td>
</tr>
</tbody>
</table>
JS
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table").deleteRow(i);
}
DEMO HERE

Categories