We Keep Coding

how to calculate rows total onclick function

I am trying to calculate column Number when I select married total are shown only married and when I select Unmarried total are shown only unmarried and if none of above total are show both.
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='1'>Married</option>
<option value='2'>Unmarried</option>
<option value='all'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td>800</td>
<td>All</td>
</tr>
</tbody>
</table>
just I want to calculate particular selected value.
if any solutions, please help me and Thanks in advance.

You can use each to loop thru the .content, check if the text is including in the array, if it is, show and add the total.
Note: I added an id to td total. This is to make it easier to update the cell.
function filterText() {
var data = $("#filterText").val();
var isAll = data.includes("All");
var total = 0;
$(".content").hide().each(function() {
if (isAll || data.includes($(this).find("td:eq(3)").text().trim())) {
$(this).show();
total += +$(this).find("td:eq(2)").text();
}
})
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>
Or you can use jQuery filter to filter the tr that is including the selected value. You can reduce the shown tr to get the total.
function filterText() {
var data = $("#filterText").val();
var shown = $(".content").hide().filter(function() {
return data.includes($(this).find("td:eq(3)").text().trim()) || data.includes("All");
}).show().get();
var total = shown.reduce((c, v) => {
return c + +$(v).find("td:eq(2)").text()
}, 0);
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>

How to view multiple tables through dropdown menu?

How can I have 2 or more tables on 1 page with only viewing 1 table at the time with dropdown menu you choose which table to show without a button or refreshing the page? Does anyone have an idea? Atleast we need to use ajax/js. I use datatables plugin for my tables. Here is a Fiddle
<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

You can use jquery hide/show method to do the same.
Please take a look at the fiddle
Below code handles showing/hiding of tables
$(function() {
$('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
$('#table2').wrap('<div id="hidetable2" class="hide" style="display:none"/>');
$('#table3').wrap('<div id="hidetable3" class="hide" style="display:none"/>');
$('#table1').DataTable( {
"searching": true
} );
$('#table2').DataTable( {
"searching": true
} );
$('#table3').DataTable( {
"searching": true
} );
console.log($("#drop"))
$("#hide"+ $("#drop")[0].value).show();
$("#drop").change(function () {
var end = this.value;
$('.hide').hide();
$("#hide"+end).show();
});
});

You can do it by making an onchange function, giving ids to the table and displaying table according to the value like this
function display(val){
document.getElementById(val).style.display = "block";
val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";;
}
#table2{
display:none;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
</select>
<table border='1' id="table1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
If you have more than two tables, you can simply do it by adding a class
function display(val){
var el = document.getElementsByClassName("allTables");
for(i=0; i<el.length; i++) {
el[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
.allTables{
display:none;
}
#table1{
display:block;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
<option value='table3'>table3</option>
</select>
<table border='1' id="table1" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table3" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

Initially set any one table which you want to display and make all the others hide. Then pass the selected table id to the onchange propery then hide all the other tables. To get all the tables which we want to hide, group it under a class name.
function show(){
var selectedTable= document.getElementById("drp").value;
var elements = document.getElementsByClassName('tableClass')
for (var i = 0; i < elements.length; i++){
if(elements[i].id==selectedTable)
elements[i].style.display = '';
else
elements[i].style.display = 'none';
}
}
<select onchange="show(value)" id="drp">
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>
</br></br>
<table border='1' id="table1" class="tableClass">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="tableClass" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>

filter in jquery to show only firstname td value

$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").parent().siblings(":first").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
Trying to Type something in the input field to search the table for first names
Filtering firstname's td to show only first name matches value into the table. I tried but does not work pls guide
Also explain what's wrong in my code
thanks

If you want to search in the FirstName only. Use can use the following code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
Remove .parent().siblings(":first") and add .find("td:first") to search for the first td in each row, aka firstname
Demo
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>

How to select a specific element with nested table in html using jquery

I have searched and tried some jquery selectors (e.g. :last) but I couldn't figure out which selector should I use. Should I use this also? The problem is, I want to add a row inside of nested <table>, and if I click add button, the only specific <table> can add a row inside it.Here's my example code:
index.html
=========================================================================
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
If I clicked the Add Item, 1 row() added below the Yamaha Item.
If I clicked the Add Customer, 1 row() added below the Some Name.
myJS.js code:
=========================================================================
$("#addItem").on('click', function(e) {
$('tr:last').after("Added Row for Items.");
e.preventDefault();
});
<br>
$("#addCustomer").on('click', function(e) {
$('tr:last').after("Added Row for Customer.");
e.preventDefault();
});

I added <tfoot> for the tr.customer and table.cart and placed the buttons therein respectively. It needed classes and ids to make a complex task much easier.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td>New item</td><td></td><td></td><td></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td>New Item</td><td></td><td></td><td></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
</script>
</body>
</html>

Give your tables unique ids.
For example:
<table id="customerTable"></table>
<table id="productTable"></table>
$("#addCustomer").on('click', function(e) {
$('#customerTable > tbody').append('<tr><td>New row</td></tr>');
e.preventDefault();
});
If you will use a loop from a data source and there will be more than two tables, you can use closest() or siblings() function to select that tables.
// note, use class instead of using id if there will be multiple buttons.
$('.addCustomer').on('click', function() {
// test if you get the correct table
var table = $(this).closest('table');
console.log(table);
// if above not work try;
var table = $(this).siblings('table');
console.log(table);
// if you successfully get the table you wanted,
table.find('tbody').append('<tr><td>New customer row</tr>');
});

You can try this,
$(document).ready(function () {
$("#AddItem").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Item</td></tr>')
e.preventDefault();
});
$("#AddCustomer").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Customer</td></tr>')
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>

Some thing like this
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StackOverflow_Solve.jQueryAjax.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script>
$(function () {
// $('#myModal').show();
$('#AddItem').click(function(e) {
e.preventDefault();
var childtable = $(this).closest('tr').find('.childtable');
console.log(childtable);
var mytr = '<tr><td>Yamaha</td><td>1</td><td>Large</td><td>Black</td><td> <button id="remove" class="remove">remove Customer</button></td></tr>';
$('#childtable > tbody:last').append(mytr);
});
$(document).on('focus', '.remove', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table id="childtable" class="childtable">
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<button id="remove" class="remove">remove Customer</button>
</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
</form>
</body>
</html>

jquery table columns Drag and Drop with re-order

I want to allow the user to reorder the columns in the table by dragging and dropping them. I am using jquery.dragtable.js to allow drag and drop and save the order after drag and drop even reload the page. Here I used localStorage to store table order as option provide by plugin JS. Its working with only a single table. In More than one table with name column header, its not working.
Actually, It's overwrite the previous localStorage variable with another table order value.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Reorder</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>
<link rel="stylesheet" type="text/css" href="dragtable.css" />
</head>
<body>
<table id="tblReg" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
<hr>
<table id="tblRegMaster" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
Jquery -
$(document).ready(function(){
var tblReg = $('#tblReg').attr('id');
var tblRegMaster = $('#tblRegMaster').attr('id');
processDnD(tblReg);
processDnD(tblRegMaster);
});
function processDnD(cuTable){
$('#'+cuTable).find('th').each(function() {
var ctxt = $(this).text();
if(ctxt == 'First Name'){
$(this).attr('id','firstName');
}else if(ctxt == 'Password'){
$(this).attr('id','password');
}else if(ctxt == 'Email'){
$(this).attr('id','iemail');
}else if(ctxt == 'Username'){
$(this).attr('id','Username');
}else if(ctxt == 'Last Name'){
$(this).attr('id','lastName');
}else if(ctxt == '#'){
$(this).attr('id','slNo');
}else if(ctxt == 'Phone'){
$(this).attr('id','phone');
}
})
$('#'+cuTable).dragtable({
persistState: function(table) {
if (!window.localStorage) return;
var ss = window.localStorage;
table.el.find('th').each(function(i) {
if(this.id != '') {table.sortOrder[this.id]=i;}
});
ss.setItem('setTableOrder', JSON.stringify(table.sortOrder));
},
restoreState: eval('(' + window.localStorage.getItem('setTableOrder') + ')')
});
$('#'+cuTable).each(function(){
$(this).dragtable({
placeholder: 'dragtable-col-placeholder',
items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
appendTarget: $(this).parent(),
scroll: true
})
});
}
I would like to work reoder multipule table. Please suggest any solution. Thanks
Plugin Refer: https://github.com/akottr/dragtable

I have solved this problem you can check on jsFiddle from below url. I hope this snippet help you.
jsfiddle.net/raeeshalam/rn8sxxba