Develop Reference

Filter table data, and show table head

I have a big table with multiple table heads. I have a simple js function to filter table data, but I need to make it so that it shows the table head section too. I added tbody and tr tags to my function but now it searches data in table but shows every thead section. How can I get that it shows only the specific thead section which contains searched tr element?
My code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can try the below approach with data attribute data-group to group thead and tbody into separate groups. That would help to recognize element sections and find string matches in groups easily.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase().trim();
$("#myTable thead").each(function() {
var group = $(this).data("group")
var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1
var selector = `tbody[data-group='${group}'] tr`
var allRows = $('#myTable').find(selector);
var isAnyRowMatched = false;
for (var row of $(allRows)) {
const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1
$(row).toggle(isRowMatched);
if ($(row).text().toLowerCase().indexOf(value) > -1) {
isAnyRowMatched = true;
}
}
$(this).toggle(isTheadMatched || isAnyRowMatched)
});
});
});
<div class="col-md d-inline">
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
<thead class="bg-primary" data-group="1">
<tr>
<th colspan="3">Information about department</th>
</tr>
</thead>
<tbody data-group="1">
<tr>
<td>Name - It</td>
<td>Phone - 1111111</td>
<td>E-mail - mail#mail.com</td>
</tr>
</tbody>
<thead class="bg-primary" data-group="2">
<tr>
<th colspan="3">Information about department 2</th>
</tr>
</thead>
<tbody data-group="2">
<tr>
<td>Name - Finance</td>
<td>Phone - 1111112</td>
<td>E-mail - finance#mail.com</td>
</tr>
<tr>
<td>Name - Finance2</td>
<td>Phone - 1111113</td>
<td>E-mail - finance2#mail.com</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Laravel how to move data from table to another using button

Is there any simple way to move data from table to another table using the id? I want to get all the info inside the first table using the id, insert it to another table, and then delete it from current one using Laravel.
In my Html table. For example I have pending reservation table and there's an action button "accept" then if I will click it the data will go to the accepted reservation table.
Pleaser refer to this photo.
enter image description here

you can use sortablejs to do the trick
check this example from the docs

if you are using datatable , then you can do something like that
var table1 = $("#pending").DataTable();
var table2 = $("#reserved").DataTable();
$(document).on("click", "#pending .move", function () {
var row = table1.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table2
.row.add( rowNode )
.draw();
});
$(document).on("click", "#reserved .move", function () {
var row =table2.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table1
.row.add( rowNode )
.draw();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table id="pending" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
</tbody>
</table>
<table id="reserved" class="table mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

How to show/hide columns using jquery based on dropdown list when using a dynamic table?

I have a dynamic table to calculate price and I want a dropdown list to toggle between hours and rate and price and quantity.
My code works as expected the issue is when I add a row to the table all columns are displayed for a spilt second before the one that should be hidden, gets hidden. I want whatever the user selected to just display when adding a new row.
Javascript
<script>
$(window).ready(function () {
type();
});
function type() {
var type = $("#typeSelect option:selected").val();
if (type === "Hours") {
$('.quantitySelect').hide();
$('.hoursSelect').show();
} else {
$('.quantitySelect').show();
$('.hoursSelect').hide();
}
}
</script>
HTML
<select class="form-control ml-4" style="width:auto;float:left" id="typeSelect" asp-for="OrderItemType">
<option value="Hours">Hours</option>
<option value="Quantity">Quantity</option>
</select>
<table class="table-bordered add_new_field">
<thead>
<tr>
<th>Item Name</th>
<th class="hoursSelect">Hours</th>
<th class="hoursSelect">Rate</th>
<th class="quantitySelect">Price</th>
<th class="quantitySelect">Quantity</th>
<th class="discountSelect colm" data-col="column1">Discount</th>
<th class="taxSelectt">Tax</th>
<th style="text-align:right; padding-right: 10px">Amount</th>
</tr>
</thead>
......

You need to add a change event handler on select and use the :nth-child() selector in order to toggle visibility for the columns of your interest:
$('#typeSelect').on('change', function(e) {
var val = $("#typeSelect option:selected").val();
if (val == 'Quantity') {
$('table.table-bordered tr :nth-child(4), table.table-bordered tr :nth-child(5)').show();
$('table.table-bordered tr :nth-child(2), table.table-bordered tr :nth-child(3)').hide();
} else {
$('table.table-bordered tr :nth-child(4), table.table-bordered tr :nth-child(5)').hide();
$('table.table-bordered tr :nth-child(2), table.table-bordered tr :nth-child(3)').show();
}
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control ml-4" style="width:auto;float:left" id="typeSelect" asp-for="OrderItemType">
<option value="Hours">Hours</option>
<option value="Quantity">Quantity</option>
</select>
<table class="table-bordered add_new_field">
<thead>
<tr>
<th>Item Name</th>
<th class="hoursSelect">Hours</th>
<th class="hoursSelect">Rate</th>
<th class="quantitySelect">Price</th>
<th class="quantitySelect">Quantity</th>
<th class="discountSelect colm" data-col="column1">Discount</th>
<th class="taxSelectt">Tax</th>
<th style="text-align:right; padding-right: 10px">Amount</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1s</td>
<td>1s</td>
<td>1q</td>
<td>1q</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tbody>
</tbody>
</table>

Table: click in row then show me the column id

i have a very simple table. When i click in a row does i become the id from the clicked column. Any ideas?
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Example:
Click on Country2: country(column id)
Click on Number3: number(column id)
$('#myTable tbody').on('click', 'tr', function () {
alert('clicked in row, but which column?');
}
Best regards

you could check the index of the td with respect row and then find the respected column th id using eq() function of jquery
$('tr td').click(function(){
var a = $(this).index();
var id = $('tr th').eq(a).attr('id')
console.log(id);
})
table ,tr,td{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

Get the row index using $(this).index() + 1:
$('#myTable tbody').on('click', 'tr', function () {
alert('You clicked on row '+ ($(this).index() + 1 ) );
});

Use index . Index start with 0 so add 1 .
$('#myTable tbody').on('click', 'tr', function() {
var row = $(this).index() + 1; // Index start with 0 so add 1
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

var $table = $('#myTable'),
$th = $table.find('thead tr th');
$table.find('tbody tr').on('click', 'td', function () {
console.log($th[$(this).index()].id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>

Hope this helpful.
Html:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" class="display table-striped">
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</table>
</body>
</html>
Script:
<script>
$('#myTable tbody').on('click','td', function () {
var row = $(this).index() ;
alert(row);
});
</script>
specify the 'td' in the script function. Doing this you will get the column id of the selected column in particular row.

Getting values of selected table rows in bootstrap using jquery

I'm using bootstrap table. In that I want to get Item ID value/values of selected table rows after clicking 'Add to cart' button present on same page.
Table code:
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
JQuery code:
$(document).ready(function()
{
$("#add_cart").click(function()
{
//foreach selected row retrieve 'Item ID' values in array;
//call ajax for otherpage.php?arr='Item ID array';
});
});
As I'm new in bootstrap I'm trying to tackle this but not getting proper solution anybody please advise me this.

Just use the check.bs.table and uncheck.bs.table events to collect your checked rows.
BS-Table Basic Events
Here is an example:
var checkedRows = [];
$('#eventsTable').on('check.bs.table', function (e, row) {
checkedRows.push({id: row.id, name: row.name, forks: row.forks});
console.log(checkedRows);
});
$('#eventsTable').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function(index, value) {
if (value.id === row.id) {
checkedRows.splice(index,1);
}
});
console.log(checkedRows);
});
$("#add_cart").click(function() {
$("#output").empty();
$.each(checkedRows, function(index, value) {
$('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<table id="eventsTable"
data-toggle="table"
data-height="300"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button id="add_cart">Add to card</button>
<ul id="output"></ul>

To get the selected (checked) rows, use getSelections method.
Note that if you are using pagination, then you have to use the maintainMetaData table option.
Here is an example which displays selected product's names when user clicks on Show Selected Rows button:
var $table = $('#myTable');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#showSelectedRows').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.name + '\n';
});
alert('The following products are selected: ' + selectedItems);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<div id="toolbar">
<button id="showSelectedRows" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>
<table id="myTable" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>Chair</td>
<td>$80</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Sofa</td>
<td>$500</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>Desk</td>
<td>$300</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>Rug</td>
<td>$200</td>
</tr>
</tbody>
</table>

Here is example give it to you :
HTML
<table id="table-style">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">Item ID</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>15</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>10</td>
</tr>
</thead>
</table>
<button>Add to cart</button>
JS
var arr;
$('button').click(function(){
arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
return $(this).closest('tr').find('td:nth-child(2)').text();
}).get();
console.log(arr);
});
DEMO

Bootstrap table has a function getSelections
with the javascript funciton you can get all selected rows. (your checkobx fiels should be bound to data-field="state")
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.Id
});
}