I'm printing table using function:
function findL(val){
var i;
//alert(splitted + " " + JSDate);
for(i=0;i<jsData.length; i++)
{
if(jsData[i].get_date() == val)
{
$('<tr>').append($('<td>').html(jsData[i].get_startT))
.append($('<td>').html(jsData[i].get_endT))
.append($('<td>').html(jsData[i].get_prow))
.append($('<td>').html(jsData[i].get_przedm))
.append($('<td>').html(jsData[i].get_sala))
.appendTo('#pzTbody');
}
}}
As an argument function takes date from datepicker, and when I pick another date it adds to the previously viewed rows.
My problem is that I tried plenty ways to cleaning/deleting old rows before next search.
I tried deleteRow(), .parentNode in loop etc. Anyone know how to delete appended rows?
From the code I assuem pzTbody is the id of your table. To clean the table body and remove all rows do this:
$("#pzTbody").empty();
If you just want to remove the last row, use this:
$("#pzTbody tr:last-child").remove();
Related
I face a problem, I can take the values from HTML table row and I can easily set them to another text box, but how we can take an image from HTML table row and how to set that into a div,
Summarize: I want to take an image from HTML Table row and set that to a div.
// For View data
$(document).ready(function() {
$("#dtBasicExample tbody").on('click', 'tr', function() {
$("#txtSelect").text("1 row selected");
var rowData = $(this).children("td").map(function() {
return $(this).text();
}).get();
$("#txtSId").val(rowData[0]);
$("#txtSName").val(rowData[1]);
$("#txtSPosition").val(rowData[2]);
$("#imgS").html(`<img src="images/'.rowData[3].'">`);
$("#txtSFacebook").val(rowData[4]);
$("#txtSTwitter").val(rowData[5]);
$("#txtSGoogleplus").val(rowData[6]);
});
});
You should rather be doing :
$("#imgS").html('<img src="images/'+rowData[3]+'">');
To concatenate in JS you need to use + and not .
You also need to use the character ' at the start and end of your string rather than using `
I have a table with data and a button that when clicked should do something with the row index. I've done this like so:
$("#tblData tBody").on('click', '.updateButton', function() {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
alert(updateButtonRowIndex);
});
This works but when I apply sorting to one of the columns, it no longer takes the actual row number but restarts from 0. This means that if I sort on ID and click on the button for 182 (now at the top) it will show that the row index is 0 and it will draw a value in the wrong row (the actual row 0).
Any solution for this?
You need to store the value for the original row index, you can always use an attribute for that like this:
$("#tblData tBody").on('click', '.updateButton', function() {
if ($(this).closest('tr').attr('originalRowIndex')) {
alert("This is the original value: "
$(this).closest('tr').attr('originalRowIndex'));
} else {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
$(this).closest('tr').attr('originalRowIndex', updateButtonRowIndex)
alert(updateButtonRowIndex);
}
});
I am using bootstrap-table and that's my pen: codepen
I need to highlight rows (in 2nd and 3rd table) with the same ID I have selected in the 1st table.
How can I select/deselect them? I guess I have to add the selected class to the rows? I have tried to do that but it doesn't seems to work unfortunately.
Here is what I have tried:
if ($('tr[class="selected"]')) {
var temp = $('tr[class="selected"]').attr("data-index");
$('tr[data-index="' + temp + '"]').addClass('selected');
}
Furthermore, why is there ascending ordering in the tables? How can I keep the original sequence of json objects?
Update your listeners with the following scripts :
$('#eventsTable').on('check.bs.table', function (e, row, element) {
var id = Number(element.attr('data-index')) + 1;
$('#eventsTable2 tr:eq('+id+')').addClass('selected');
$('#eventsTable3 tr:eq('+id+')').addClass('selected');
});
$('#eventsTable').on('uncheck.bs.table', function (e, row, element) {
var id = Number(element.attr('data-index')) + 1;
$('#eventsTable2 tr:eq('+id+')').removeClass('selected');
$('#eventsTable3 tr:eq('+id+')').removeClass('selected');
});
I'm looking to dynamically add rows and columns to a table, and I've gotten pretty far researching how to do this with jQuery. I've successfully, been able to add columns that have the correct number of rows and remove an ENTIRE row. What I have not been able to do is add a row with the CORRECT number of columns and remove an ENTIRE column (all rows gone!).
Here is the script I have so far:
jQuery(window).load( function($) {
// Add column function
jQuery('#ldrm-add-col').click(function() {
jQuery('.ldrm thead tr').append('<th class="rb-top">Test</th>');
jQuery('.ldrm tr:gt(0)').append('<td>Col</td>');
console.log('autocomplete');
});
// Add row function
jQuery('#ldrm-add-row').click(function() {
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td><td>Test</td></tr>');
console.log('autocomplete');
});
// Remove row function
jQuery(document).on('click','td.remove-row .btn', function() {
jQuery(this).closest('tr').remove();
});
});
So, if I start with three columns and click add row, it works fine right now because it adds 3 rows. However, if I click add column and it appends a 4th column and then I click add row, there is a cell missing because the script doesn't know that another column was added.
http://jsfiddle.net/2kws0aLx/
Any suggestions on how I can improve the add row script to take into account any dynamically added columns?
For your add row function you will need to account for how many columns that are currently in the table. I did a quick and dirty IIFE to show what I mean.
http://jsfiddle.net/2kws0aLx/1/
// Add row function
jQuery('#ldrm-add-row').click(function() {
// -2 to account for the two empty th's at top left
var numOfCol = $('thead th').length - 2;
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td>' + (function() { var str = ''; for(var i=0; i < numOfCol; i++) { str += '<td>Test</td>'; } return str; })());
console.log('autocomplete');
});
I have a table that I loop with JQuery in order to find rows that match certain conditions:
$('#sometable').find('tr').each(function () {
var row = $(this); //<----
if(row.find('input[type="checkbox"]').is(':checked')) {
//etc
}
}
My question is, is there a way to remove each matched row? I mean is there a way to collect these row variables inside my if(row.find('input[type="checkbox"]').is(':checked')) so that I can remove the specific rows from my table directly?
Note that my rows don't have a unique id
You may want:
$('#proposedtable tr:contains(input:checkbox:checked)').remove();
or
$('#proposedtable input:checkbox:checked').closest('tr').remove();
Try this:
var filteredRows = $('#sometable').find('tr').filter(function(){
return $(this).find('input[type="checkbox"]').is(':checked'));
});
$(filteredRows).remove();
The above function will gather all the rows(tr) and then filter those rows based on the checked state of checkbox. Later the filtered rows will be removed.
To make it as array, use Array.prototype.slice.call()
var arrFilteredRows = Array.prototype.slice.call(filteredRows);
Is this help you ?
http://jsfiddle.net/LGdA3/
<pre><code>
$('input#myButton').on('click', function(){
$('table#someTable td input[type="checkbox"]:checked').each(function(){
$(this).parents('tr').first().remove();
});
});
</code></pre>