Search table content based on title attribute value - javascript

I want to have search button to my tables.The search button should filter the values based on title tag value in first and second cell of row and also with whole row.I am able to do this without depending on title tag but I need to do this with title tag also.
How can I achieve this?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Testname</th>
<th>Description</th>
<th>Created on</th>
<th>Updated on</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td title="test_name">Test Name</td>
<td title="test desctiption"> trail testing</td>
<td>yesterday</td>
<td>two hour ago</td>
</tr>
<tr>
<td title="test_name">
Trail Test
</td>
<td title="desctiption">testing</td>
<td>today</td>
<td>a hour ago</td>>
</tr>
</tbody>
</table>
</div>

You can filter the title text too:
(PS: Do not toggle in the filter - that is abusing a side-effect)
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var re = RegExp(value.replace(/([\(\)])/g,"\\$1"), "i"); // escape ()
$("#myTable tr").hide().filter(function() {
var inTitle = $(this).find("td").filter(function() {
return re.test(this.title);
}).length > 0; // is in title?
return re.test($(this).text()) || inTitle
}).show();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search.." autocomplete="off">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Testname</th>
<th>Description</th>
<th>Created on</th>
<th>Updated on</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td title="test1">Test Name</td>
<td title="( test1d )"> trail testing</td>
<td>yesterday</td>
<td>one hour ago</td>
</tr>
<tr>
<td title="test2">
Trail Test
</td>
<td title="(test2d)">testing</td>
<td>today</td>
<td>a hour ago</td>>
</tr>
</tbody>
</table>
</div>

Related

i have to call two button click events add and remove from jquery tabs,i'm using jquery forms

this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table
In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .

How to save table with contenteditable column into local storage

I'm trying to save the content of column 3, with id name = 'edit' in the table, locally. Here is the code:
// Button to save edit
function saveEdits() {
var table, tr, editElem, userVersion, i, j;
table = document.getElementById("mytable");
tr = table.getElementByClassName("output");
editElems = {
for (i=0; i< tr.length; i++){
//get the editable element
userVersion[i] : tr[i].getElementsById("edit").innerHTML;
}
}
localStorage.setItem('userEdits', JSON.stringify(editElems));
}
// place in the body to reload the changes
function checkEdits() {
var userEdits = localStorage.getItem('userEdits');
if (userEdits) {
userEdits = JSON.parse(userEdits);
for ( var elementId in userEdits ) {
document.getElementById(elementId).innerHTML = userEdits[elementId];
}
}
}
I am following tutorial in https://www.developerdrive.com/allowing-users-to-edit-text-content-with-html5/, but I want to apply it to the table, however, it doesn't work.
Here is my html code
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src=./javascript.js></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>
There are some bugs in the code:
tr = table.getElementByClassName("output"); // it is getElementsByClassName
secondly, I don't know if this style of declaring a JSON is valid or not but since it didn't worked, I changed it and saved the values first to an array and then converted it to a JSON String.
Another thing is that the way you are trying to store key value pairs in JSON you won't be able to get a selector in a JSON String and hence you won't be able to update the values correctly. So, i have used an associative array where it's keys are the row number in which the edit was performed and the value holds the new content of that column. So, while updating you just have to select the desired column from a row in which the values should be updated.
This is working fine:
// Button to save edit
var TR;
function saveEdits() {
var table, tr, editElem, userVersion = [], i, j;
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
TR = tr;
console.log(tr);
for (i=0; i< tr.length; i++){
// This will set a key value pair where key as row number and value as the inner HTML
// This key will further help us updating the values from localhost
userVersion[tr[i].sectionRowIndex] = tr[i].getElementsByTagName("td")[3].innerHTML;
}
console.log(userVersion);
localStorage.setItem('userEdits', JSON.stringify(userVersion));
}
// place in the body to reload the changes
function checkEdits() {
try{
var userEdits = localStorage.getItem('userEdits');
//console.log(JSON.parse(userEdits));
if (userEdits) {
userEdits = JSON.parse(userEdits);
table = document.getElementById("mytable");
tr = table.getElementsByClassName("output"); //element
for ( var elementId in userEdits ) {
tr[elementId].getElementsByTagName("td")[3].innerHTML = userEdits[elementId];
}
}
}catch{
//console.log("Hello");
}
}
<!doctype html>
<html>
<head>
<title>BOOK LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body onload="checkEdits()">
<div class="header">
<h1>BOOK</h1>
</div>
<div class="tbody">
<table id="mytable" align="center" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">BOOK NAME</th>
<th width="50%">AUTHOR</th>
<th width="25%">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr class='output'>
<td>1</td>
<td>BOOK 1</td>
<td>John</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>2</td>
<td>BOOK 2</td>
<td>Sara</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>3</td>
<td>BOOK 3</td>
<td>Mary</td>
<td id='edit' contenteditable='true'>No Description</td>
</tr>
<tr class='output'>
<td>4</td>
<td>BOOK 4</td>
<td>Bob</td>
<td id='edit' contenteditable='true'>No Description</td>
<!---- TABLE FILTER AND SORT FUNCTION ---->
<script>
$(document).ready(function() {
$('#mytable').DataTable( {
"pagingType": "full_numbers"
});
});
</script>
</tbody>
</table>
<!--------------------- EDIT FILE ----------------------------------------------->
<input id='saveComment' type='button' value='Save' onclick='saveEdits()'>
<!------------------------------------------------------------------------------->
</div>
</body>
</html>

jQuery Datatables, editing selected row's td with text box

I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();
Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>

How to add rows in HTML Table using Jquery?

I want to add rows dynamically at runtime using Jquery. At beginning table don't have any records. When user click the ADD Button it has to add the rows.
When user click ADD Button the operator dropdown list box value and Filter values should add in that table row.
Here what I tried
Jquery CODE
$("#btnAdd").click(function () {
// $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>");
$('#queryTable > tbody:last-child').append('<tr>Record1</tr><tr>Record2</tr>');
});
I tried both lines. But it doesn't make any sense.
Thanks
HTML Code
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td> //Please ignore these two records. At beginning the table will be empty
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
The correct jQuery code to add HTML elements is:
$('#queryTable tbody').append('<tr><td>Record1</td><td>Record2</td></tr>');
Your input string HTML is incorrect. As of now you have no TD element thus content is not displayed. However its appended and exists in DOM
'<tr><td>Record1</td><td>Record2</td></tr>
instead of
'<tr>Record1</tr><tr>Record2</tr>'
$('#queryTable > tbody:last-child').append('<tr><td>Record1</td><td>Record2</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html>
<head>
<title>Add Rows Dynamically</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add").click(function(){
var name = $("#name").val();
var lastname = $("#lastname").val();
var markup = "<tr><td>" + name + "</td><td>" + lastname + "</td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
<input type="text" id="name" placeholder="Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" class="add" value="Add">
<table style="border: 1px solid black;">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
It may help you.

when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page

i have a table when the table row is selected.i want that particular row to be appended in another table.
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>
There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>
EDIT: Used loop instead repeating
Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})
<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.
$('#myModal').modal('toggle');
$(document).on('change', 'input[type="checkbox"]', function(e){
if($(this).is(":checked"))
{
var row = $(this).closest('tr').html();
$('.table2 tbody').append('<tr>'+row+'</tr>');
}
else
{
$('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
}
$('#row').on('click', ':checkbox', function (event) {
$(this).closest('tr').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="col-md-6">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<table class="table1 table table-bordered" id="echo">
<h3 style="text-align: center;"></h3>
<tr>
<td>1</td>
<td name="echo">A</td>
<td>1500</td>
<td><input type="checkbox" value="1" class="check-box"></td>
</tr>
<tr>
<td id="2">2</td>
<td name="fetal_echo">B</td>
<td>2000</td>
<td><input type="checkbox" value="2" class="check-box"></td>
</tr>
<tr>
<td id="1">3</td>
<td value="abc">C</td>
<td>8500</td>
<td><input type="checkbox" value="3" class="check-box"></td>
</tr>
<p id="output"></p>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button>
</div>
</div>
</div>
</div>
<table class="table2 table table-bordered" id="row">
<tbody>
</tbody>
</table>
<div>
#vijay mishra and #Vishnu Bhadoriya thankyou for your support....You are really awesome.

Categories