jQuery delete all table rows except the selected one? - javascript

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)

Related

Get Selected Value from Table using JQuery

I am using below code for getting check value from table which is printing all checked checkbox value.But i want to get only selected checkbox value not all checked value.
function clickedBoxAdd(checkBoxvalue) {
var values = new Array();
$.each($("input[name='" + checkBoxvalue + "']:checked").closest("td").next("td").next("td"),
function () {
values.push($(this).text());
});
alert(values);
addVariablesRow1()
}
For adding table row if i click checkbox using below code which is working.Can anyone please help how to delete rows as well when i unselect checkboxes.
function addVariablesRow1() {
var $t = $("#addTable");
var $row = $($t.find("tr")[1]);
var r = $row.clone();
r.find("input[type=text]").val("")
r.find("input[type=checkbox]").attr('checked', false)
r[0].style.display = "";
r.appendTo($t);
}
HTML
<input type="checkbox" class="checkBox" name="checkBox_B[]" onclick="clickedBoxAdd(this.name)">
Table
<table id="addTable" class="table table-bordered">
<thead>
<tbody class="snmp_oid_table">
<tr class="info">
<th>Oid</th>
<th>Data Type</th>
<th>Set Value</th>
</tr>
</thead>
<tr style="display:none">
<td>
<input type="text" class="name" id="oids" name="oid">
</td>
<td>
<input type="text" class="text" name="oid_description">
</td>
<td>
<input type="text" class="expectedValue" name="expected_value">
</td>
</tr>
</tbody>
</table>
CheckBox
<table id="addOidTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="checkBox_add_b[]" onclick="selectAddAll(this)"/>SA</th>
<th>name</th>
<th>Oid </th>
</tr>
</thead>
<tbody class="oid_table">
<% #all_b_oids.each do |oids| %>
<tr id="tr_snmp_<%=oids['id'] %>">
<td>
<input type="checkbox" class="checkBox" name="checkBox_Oid_B[]" onclick="clickedBoxAddAll(this.name)">
</td>
<td style="word-break:break-all;">
<%= oids['name']%>
</td>
<td style="word-break:break-all;">
<%= oids['oid']%>
</td>
</tr>
<% end %>
</tbody>
</table>
You are actually getting all checkbox's values and pushing those in arrays by using '$.each'
Anyway, for the first part of your question, your checkbox should have a class e.g. chkbox, then you can get it's value in it's click handler:
$(".chkbox").click(function() {
$(this).closest('td').html()
});
To delete a row from table, assign id to each tr once you create it:
r.attr("id", "rowid");
Then once checkbox is unselected, you can remove row in checkbox's click handler:
$(".chkbox").click(function() {
if(!$(this).is(':checked')) {
$('#rowid').remove();
}
});
Hope this helps.

Dropdown not working inside jquery datatable mobile view

Go to fiddle
https://jsfiddle.net/rizwanali98601/ngofhc24/12/
In following table , there is dropdown inside jquery datatable.
On button click, I add option in dropdown.
But in mobile view option not added to dropdown.
<p>Click on Add option button to add options in dropdown</p>
<button type="button" id="btn1">
Add option
</button>
<br/>
<table class="table table-striped table-hover" id="myTable">
<thead>
<tr>
<th>Indent No.</th>
<th>Warehouse</th>
<th>Item</th>
<th>Make/Catno</th>
<th>UOM</th>
<th>Qty</th>
<th>Qty P</th>
<th>Sh Cl</th>
<th>Date</th>
<th>SortDate</th>
<th>Rqt Dt</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>INDMSF/16-17/00003</td>
<td>Furnace</td>
<td>Bearing 22317 EW33J</td>
<td></td>
<td>no</td>
<td>2.0</td>
<td>2.0</td>
<td></td>
<td>31/08/16</td>
<td>08/31/16</td>
<td>31/08/16</td>
<td><select id="ddlTest" style="width: 300px"></select></td>
</tr>
</tbody>
</table>
Try using .on()
So change...
$("#btn1").click(function(){
var ddl = $('#ddlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));
});
To this...
$("#btn1").on('click', function() {
var ddl = $('#ddlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));
});

Get <tr> items form a Table

I Have this table:
<table class="table table-hover">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Type</th>
<th>Phone</th>
<th>S.N.</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer" onclick="mandaDetalle(this.id)">
<td>PE-6</td>
<td>John Smith</td>
<td>GT5</td>
<td>845254585</td>
<td>56456456456</td>
<td>14/07/2017</td>
</tr>
</tbody>
</table>
How Can I send onclick that <tr> element with the items into a javascript (or jquery) function, I already sending the id of that one <tr> but I need to send the items as well, because I need to manipulate them, I need to store each <th> into a variable, so I can use them later.
you can do it like this:
(1) Add an id attribute to your row
(2) Attach an onclick event listener to the row found by the id set previously
(3) Look at the event.target to get the clicked table cell
(Simplified) HTML:
<table>
<tr id="row">
<td>
first cell
</td>
<td>
second cell
</td>
</tr>
</table>
JavaScript
function onRowClick(event) {
console.log(event.target);
}
document.getElementById('row').addEventListener('click', onRowClick);
Here's the JSFiddle for a demo. (make sure to open your web console)

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>

JavaScript code outputs twice when clicking submit button

For some reason, the code in the example below keeps outputting twice when clicking the button and I can’t figure out the cause.
var onClick = function() {
var cars = ["Saab", "Volvo", "BMW"];
var rows = "";
rows += "<tr><td> " + cars[0] + " </td></tr>";
$(rows).appendTo("#list tbody");
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table id="list" class="table table-bordered; sortable">
<thread>
<tr>
<th>Group Name</th>
</tr>
</thread>
<tbody></tbody>
</table>
JSFiddle.
That’s because you have a typo: <thread> should be <thead>.
This typo caused your table structure to be invalid, making the browser attempt to correct it to this:
<thread></thread>
<table id="list" class="table table-bordered; sortable">
<tbody>
<tr>
<th>Group Name</th>
</tr>
</tbody>
<tbody></tbody>
</table>
Thereby, your <table> had two <tbody> elements, making the "#list tbody" selector yielding two results, thus appending it twice.
It's because your table thead has typo. I fixed it in this updated Fiddle.
<input type="button" id="button" value="Click Me" />
<table id="list" class="table table-bordered; sortable">
<thead>
<tr>
<th>Group Name</th>
</tr>
</thead>
<tbody></tbody>
</table>

Categories