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.
Related
I have a table populated with dynamic data. the last column has a button which when I click I would like to pass the row id to the JS function.
I need the id because I am doing a POST Ajax request and on success I want to take the response data and update the selected row with new data.
This is what I would do to insert a new row:
var rowNode = myTable.row.add([1,2,3,4,5,6,7,8]).draw();
but what can I do to get the row ID and update it with the response data?
EDIT. Datatable:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach (get_all_customers_list() as $user) { ?>
<tr>
<td>
<b> <?php echo $user["recipient_name"]; ?></b>
</td>
<td>
<?php echo $user["registration_date"]; ?>
</td>
<td>
<button type="button" id="button_edit" onclick='edit_customer_request(<?php echo json_encode($user); ?>)' value="<?php echo $user; ?>" name="edit_customer">Editt</button>
</td>
</tr>
<?php }?>
</tbody>
</table>
Since you are only wanted to get the row id of the clicked row edit button. You can simply use table.row function and pass the actual tr of the clicked button.
Demo (Showing the actual id (1, 2) which is stored as name)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//Getting the actual table ID
var row = $(_this).parents('tr')[0];
//Data table row id
console.log(table.row(row).data()[0]);
}
<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" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
Demo (Showing the actual index of table - Index start from 0 to depending on how many rows you have)
var table = $('#myTable').DataTable({})
//edit customer here
function edit_customer_request(_this) {
//get the closest of clicked edit button
var tr = $(_this).closest("tr");
//get the index of row
var rowindex = tr.index();
//Index of row
console.log(rowindex)
}
<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" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" />
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Reg</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Blah</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this, 1)' value="1" name="edit_customer">Edit</button></td>
</tr>tr>
<tr>
<td>2</td>
<td>Blah Nixon</td>
<td><button type="button" class="button_edit" onclick='edit_customer_request(this ,2)' value="2" name="edit_customer">Edit</button></td>
</tr>
</tbody>
</table>
this is my simple answer:
var table = $('#table-values');
$('#table-values').on( 'click', 'tr', function(){
var id = this.id;
alert( 'Clicked row id '+id );
});
Easy. :)
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>
I have two tables.Table 1 and table 2.I want to copy one row content to another when click on the that row instead of button ,using java-script.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("t1").clone().appendTo("t2");
});
});
</script>
</head>
<body>
<table style="width:100%;border-style:dashed">
<tr1>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr1>
</table>
</br>
<table style="width:100%;border-style:dashed">
<tr2>
<th></th>
<th></th>
<th></th>
</tr2>
</table>
<button>colne</button>
</body>
</html>
i will appreciate if codepen example be given.
You might trying to achieve this using
.droppable
Check this
Jsfiddle
$(document).ready(function() {
var items = [];
$("#myTable tr").on("click", function() {
var newTr = $(this).closest("tr").clone();
var newButtonHTML = "<input type = 'button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>";
$(newButtonHTML).children("button").click(function(e) {
});
$(newTr).children("td:last").html("").html(newButtonHTML);
items.push(newTr);
newTr.appendTo($("#stopsTable"));
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="height: 700px;width: 100%;overflow: auto; float: left;">
<table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" >
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td>The Indian Heights School</td>
<td>28.56137</td>
<td>77.05249</td>
<td>06:06:12</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >2</td>
<td>The Indian Heights School</td>
<td>28.56136</td>
<td>77.05246</td>
<td>06:06:23</td>
<td>Ignition_On</td>
</tr>
<tr >
<td >3</td>
<td>The Indian Heights School</td>
<td>28.56135</td>
<td>77.05242</td>
<td>06:06:31</td>
<td>Start</td>
</tr>
<tr >
<td >4</td>
<td>The Indian Heights School</td>
<td>28.56139</td>
<td>77.05245</td>
<td>06:06:41</td>
<td>Ignition_On</td>
</tr>
</tbody>
</table>
<table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;">
<thead>
<tr>
<th>S No</th>
<th>Stop Name</th>
<th>Longitude</th>
<th>Latitude</th>
<th>ETA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Just see my code in this example .I think it will be help full for you and other friends.
should be a simple matter of jquery dom manipulation, consider this:
<table id="first-table">
<tbody>
<tr class="row-copier"><td>Content here</td><td>other content</td></tr>
<tr class="row-copier"><td>more content</td><td>second column</td></tr>
<tr class="row-copier"><td>...and something completely different</td><td><h1>YAY!</h1></td></tr>
</tbody>
</table>
<table id="second-table">
<tbody>
<tr><td>Result Table</td><td>where stuff will get copied</td></tr>
</tbody>
</table>
<script>
jQuery(function($) {
$('.row-copier').click(function() {
// select row-copier row, clone it, and append to second table body
$(this).clone().appendTo('#second-table>tbody');
});
});
</script>
the important bits are the clone operation to make a deep copy, and the appendTo to specify where the clone copy is being put. I edited the answer to reflect your desire to copy the row clicking anywhere on the row itself, so no links are required, nor a closest to get the row.
good luck!
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>
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>