I'm creating <tr> dynamically and append this tr to <tbody> with jquery append method.
The <table> is created inside modal whenever I open modal without refreshing the page the same <tr> appending again and again to the old <tr>.
TABLE inside modal
<table class="table table-bordered tablesorter" id="work_aval">
<thead>
<tr>
<th rowspan="1" colspan="8" class="text-center"></th>
</tr>
<tr>
<th rowspan="1" colspan="8" class="text-center">It is necessary to have some element of weekend availability. If you tick the weekends this could be applied as alternate as well
</th>
</tr>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
AJAX call for <tr> append
$("#work_aval tbody").append(response.availability);
Can you please try html() instead of append() method?
Ex:
$("#work_aval tbody").html(response.availability);
$('#work_aval tbody').empty();
This line works for me.
Thanks
Related
So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.
Below is the html code for table
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData()">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
So, when I click update, i want to fetch "J001" (first column of the update button row).
I tried below, but it's not fetching.
function updateData(){
var $item = $(this).closest("tr")
.find(".nr")
.text();
alert($item);
}
Any help or suggestion will be appreciated.
You have to pass this in your update function call,
Your Html should be,
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData(this)">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
Jquery function should be,
function updateData(e){
var $item = $(e).closest("tr")
.find("td:first")
.text();
alert($item);
}
Here i want to copy rows and must be able to paste the rows below
i want to add functionality to my table as in this fiddle
http://jsfiddle.net/Lfjuapub/1/
Please find my fiddle
https://jsfiddle.net/zrcoLyeg/6/
<table id="tblColumnSchedule" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th data-sort-initial="true" data-toggle="true">User</th>
<th data-hide="phone, tablet">Label</th>
<th data-hide="phone, tablet">Profile</th>
<th data-hide="phone, tablet">Location</th>
<th data-hide="phone, tablet">Start</th>
<th data-hide="phone, tablet">End </th>
</tr>
</thead>
<tbody>
<tr>
<td>s1</td>
<td>w10x22</td>
<td>A1</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>s2</td>
<td>w10x24</td>
<td>A1.1</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
For example if i select 2 rows cloumns like Location, Start , End,
i must be able to paste selected rows in 3 rows.
Any help is highly appiceable.
Try using an external library like handsontable.
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)
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>
Is it possible to work with 2 rows in THEAD with dataTables?
<table>
<thead>
## row 1
## row 2
</thead>
<tbody></tbody>
</table>
In row 1 I need 2 single columns and one column with colspan="3":
<tr>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
And in row 2 I need 5 columns:
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
But I have a case where I don't need 5 columns, but only 3.
Can this be generated dynamically?
UPDATE: I tried: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
But there's no good example how it's generated.
If you look at the source code of the example link you posted, it seems quite clear:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th colspan="3">Details</th>
</tr>
</tfoot>
(Code lifted from link above)
A word on viewing source code: In Firefox you can press ctrl + u to view the page source code. Even if there is heavy jQuery action on the page, the source code in that window will always be the original one without DOM modifications.