I can successfully delete rows of my table and remove it from the table with jquery and ajax. On top of my table i have the number of rows displayed. How can i refresh the div (update_count) to show the decremented number after deleting ?
<div id="update_count"><?=$num_count?> data</i></div>
<table class="table">
<tr>
<th style="width:1px"><strong>Date</strong></th>
<th style="width:5px">Labo</th>
<th style="width:5px">Delete</th>
<tr>
<?php foreach($IndicacionesLab as $row)
{
?>
<tr>
<td><?=$row->insert_time;?></td>
<td><?=$row->laboratory;?></td>
<td> <a title="Eliminar laboratorio <?=$row->laboratory;?>" class="st deletelab" id="<?=$row->id_lab; ?>" style="background:rgb(223,0,0);cursor:pointer">Delete</a></td>
</tr>
<?php
}
?>
</table>
Js
$(".deletelab").click(function(){
if (confirm("Sure to delete ?"))
{
var el = this;
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
url:'<?=base_url('admin/DeleteHistLab')?>',
data: {id : del_id},
success:function(response) {
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
}
})
For simplicity keep all the data rows in a <tbody>
<table id="my-table">
<thead>
<tr>
<th> heading 1 </th>
</tr>
</thead>
<tbody>
<tr>
<th> data 1 </th>
</tr>
</tbody>
</table>
Then after you remove the row get the length of all rows remaining
$('#update_count').text( $('#my-table tbody tr').length + ' Items')
Related
I would like to know how could I assign a table row an id which is systematically as a counter. It can be a string + a counter as follow:
<table>
<tr id="Row1"> # it can be only a number => id="1"
<tr id="Row2"> # it can be only a number => id="2"
<tr id="Row3"> # it can be only a number => id="3"
.....
<tr id="Row5000"> # it can be only a number => id="5000"
</table
Because I have thousands of rows and then could not assign id to them manually. This is why I want to assign them via XSLT. Does anybody know how could I do so? Thanks.
// javascript
var table = document.querySelectorAll('table tr');
{
for(var i=0;i<table.length;i++){
table[i].setAttribute("id",i+1);
}
//jquery
$("table tr").each(function(index,object) {
object.attr("id",(index+1));
})
$("table tr").each(function(i, tr) {tr.id = 'Row' + (i+1);})
explanation: you can find each tr in table and assign id for each one.
First you assign an id attribute to your table like this
<table id="mytable">
<tr></tr>
<tr></tr>
....
</table>
Then add a script at the bottom of your document
<script>
(function() {
var rows = document.getElementById("mytable").rows;
for(var i = 1; i <= rows.length; i++) {
rows[i-1].id = 'Row'+i;
}
})();
Its a pure javascript solution. No jQuery required.
Assign your table an id. here its newTable then iterate and set the attibute
<script>
function getit(){
$('#newTable').find('tr').each(function(index){
var x= this.setAttribute("id","Row"+[index]);
console.log(x);
})
}
</script>
hope that helped.
You Can Use This:
Your CSS
<style>
body {
counter-reset: section;
}
table tbody tr th::before {
counter-increment: section;
content: "Section " counter(section);
}
table tbody tr th::before {
content: counter(section);
}
</style>
Your Html
<table class="table">
<thead>
<tr>
<th colspan="6">
</th>
</tr>
<tr>
<th scope="col">#</th>
<th scope="col">f1</th>
<th scope="col">f2</th>
<th scope="col">f3</th>
<th scope="col">f4</th>
<th scope="col">f5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
</tbody>
</table>
I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>
I have a simple AJAX request as part of an infinite scroll on a page that fetches more records to add to an existing table that shows the first 20 rows. The AJAX request is working and returning the correct data but it's not appearing in the correct location (it's showing above the existing rows).
Here's an example of how the table looks:
<div>
<br />
<table class="table table-striped table-bordered">
<thead>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope=“col”>Location</th>
<th scope=“col”>Type</th>
<th scope=“col”>Manager</th>
</thead>
<tbody>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
<td> 4:00 PM</td>
<td> Sydney</td>
<td> In House</td>
<td> Barney Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
<td> 4:00 PM</td>
<td> Melbourne</td>
<td> External</td>
<td> Betty Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
<td> 5:00 PM</td>
<td> Dallas </td>
<td> External</td>
<td> Fred Flinstone</td>
</tr>
<div id="content"></div>
</tbody>
</table>
</div>
and here's the Javascript:
var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadArticle(skip);
skip += 20;
}
});
function loadArticle(pageNumber) {
$.ajax({
url: "getRecords.php",
type: 'POST',
data: "action=" + action + "&skip=" + skip,
success: function(html) {
$("#content").append(html); // This will be the div where our content will be loaded
}
});
return false;
I added a div after the last table row to insert the new rows into:
<div id="content"></div>
but the new rows are not appearing after the last row, rather above the existing rows.
Not sure what I'm doing wrong here. I'm using the Bootstrap framework if that helps.
You can't have a div after a tr in a table like that. The browser will not render it where you put it if you do that.
Get rid of the <div id="content"></div> and add the id to your tbody like this
<tbody id="content">
Add <tr> and in tr add <td> and then within td add div. Anything written in table which is not inside <td> will show before the table
<tr>
<td>
<div id="content"></div>
</td>
</tr>
I have table which goes like this:
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>
Eventname
</th>
<th>
Time
</th>
<th>
Parsed Channel
</th>
<th>
Real Channel
</th>
<th>
Edit
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
<tr>
<?php while ($row = $req_events_parse->fetch()) {
echo"<td>
".$row['eventname']."
</td>
<td>
".$row['datetime']."
</td>
<td>
".$row['twchannel']."
</td>
<td class='center'>
".$row['realchannelname']."
</td>
<td>
<a class='edit' href='javascript:;'>
Edit </a>
</td>
<td>
<a class='delete' href='javascript:;'>
Delete </a>
</td>
</tr>";
}
?>
</tbody>
</table>
And i have jscript which on buttonclick enables me to edit table data but only keeps it in html, main part of the script goes like this:
table.on('click', '.edit', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated!");
} else {
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
My question is, how would i get values from row i was editing, i would like to get those values and send them to my php script which will update mysql database acordingly.
I have the following table
<table id="edit_po_table">
<thead>
<tr>
<th>Discount</th>
<th>
<select id="discount">
<option value="0">0%</option>
<option value="25">25%</option>
<option value="35">35%</option>
<option value="42">42%</option>
<option value="50">50%</option>
</select>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Quantity</th>
<th>Stock #</th>
<th>Product Name</th>
<th>Volume Points</th>
<th>Price</th>
<th>Volume Total</th>
<th>Line Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
And the following jQuery code
$('#table_po_product_list :checkbox').click(function() {
if($("#table_po_product_list :checkbox").prop('checked')) {
var i = $("#table_po_product_list input:checked").length;
$('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));
} else {
var i = $("#table_po_product_list input:checked").length;
$('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));
}
var stocknos = $('#table_po_product_list :checked').map(function(){
return $(this).val();
}).get().join(',');
if($('#table_po_product_list :checked').length === 0) {
$('#edit_po_table tbody').html('');
}
alert(stocknos);
if (stocknos.length > 0) {
$.ajax({
type: "POST",
url: "functions.php",
data: "ids=" + stocknos, //{'stock_nos[]': stocknos},
cache: false,
success: function(html) {
$('#edit_po_table tbody').html(html);
}
});
}
})
$('#edit_po_table tbody input').on("change", function(event){
var tdid = $(this).attr('id');
var qty = $('#edit_po_table tbody tr#'+tdid+' td input').val();
var vol = $('#edit_po_table tbody tr#'+tdid+' td#vol_pts').text();
var price = $('#edit_po_table tbody tr#'+tdid+' td#price').text();
alert(tdid);
$('#edit_po_table tbody tr#'+tdid+' td#total_vol').html(qty*vol);
$('#edit_po_table tbody tr#'+tdid+' td#total_price').html(qty*price);
})
And functions.php will return the following when asked:
<tr id=0141>
<td><input type="text" size="5"></td>
<td>0141</td>
<td>Formula</td>
<td id="vol_pts">23.95</td>
<td id="price">68.49</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>
<tr id=6424>
<td><input type="text" size="5"></td>
<td>6424</td>
<td>Reference Guide (Bilingual)</td>
<td id="vol_pts">0.00</td>
<td id="price">9.20</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>
Now, I am trying to get my $('#edit_po_table tbody input').on("change", function(event) jquery section of code to work but am unable to find a way to make it work.
Basically, this is how I want my code to function, the user is shown a product table, they then select products from the table. The selection gets passed via jquery to functions.php which then spits back the <tbody> data for the edit_po_table.
Then user then needs to fill in the quantity desired, and the table should auto calculate the total volume points and price for the line. i have tried different ways to get the <tr> id, then go to the <td> it only works for the first row, I can't get it to work for any other rows.
Help?
You can try after modifying the jQuery.on to this
$('#edit_po_table tbody').on("change",'input', function(event){
//your code
});
This syntax is equivalent to $.live and event binding will persist for dynamically added elements too. :)