We Keep Coding

Fetch the row from html table on button click

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);
}

jQuery delete all table rows except the selected one?

I'm trying to come up with the best way to use jQuery to delete all the rows except for the one selected. I've done some searching and I've seen several posts about deleting all records or all records except the first or last row but nothing on deleting all but the one selected.
The scenario would be searching for a list of employees which would return maybe 5 records. Then there would be a "Select" button and when you click on that button it would remove all <tbody> rows except for that one. Actually from there my idea is to not only remove the rows but then to hide the "Select" button and display a text box as well as displaying a "Add" button below the table to add the employees with the item entered in the textbox.
I've thought about putting a hidden field on each row that has an row #, pass that row index to a jQuery function and then loop through all of the Tbody.Tr and remove if it doesn't match the row index passed in?
Another thought would be to put an Onclick on each of the "Select" buttons and then in the function use "this" to for reference to the row but then I don't know how to effectively say "remove all but $this row".
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.listEmployee)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button id="btnSelect" class="btn btn-sm">Select</button>
<input id="txtCaseNo" type="text" style="display:none;" />
</td>
</tr>
}
</tbody>
</table>

First ids need to be singular so id="btnSelect" is not going to work. Make it a class or name.
So select the TR and select the siblings and you can remove it.
$("tbody").on("click", "button", function() { //bind the click to the buttons
var button = $(this) //get what was clicked
$(this).closest("tr") //select the TR
.siblings() //get the other TRS
.remove() // um, remove them
button.hide() //hide your button
button.siblings().removeAttr('hidden') //show the input
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>A#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>B#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>C#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>D#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
</tbody>
</table>

Why not filter on your Model.listEmployee on the id of the selected row? This is assuming your current set up is reactive.
Ie:
const new_list = old_list.filter(item => item.id !== selected_id)

add hidden variable value to the session without form submission

i have a basic html table with some data displayed, what i want is when i click on specific row the value of incident Id cell is passed to the hidden variable value i have developed this part, what i don't know how can i put hidden variable value in the session for other functionality purposes.
my table
<div id="tab1" class="tab active">
<table class="table table-striped">
<thead style="background-color: #F0F1F2">
<tr>
<th>Incident Id</th>
<th>Party Name</th>
<th>Max Rank</th>
<th>Incident Description</th>
</tr>
</thead>
<tbody>
<c:forEach items="${incidents}" var="incident">
<tr id="tr" onclick="changeIncidentValue(${incident.incidentId})">
<td>${incident.incidentId}</td>
<td>xxx</td>
<td>${incident.partyNameMaxRank}</td>
<td>${incident.incidentDesc}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<input type="hidden" id="incidentId" name="incidentId" value=""/>
js function
<script>
function changeIncidentValue(incidentId){
$('#incidentId').val(incidentId);
var x = $('#incidentId').val();
console.log(x);
}
</script>

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