How to exclude a particular row based on its class-name using Jquery.
filterBySensor= function (event) {
j("#example tr").hide(); //hide all rows
j("#example tr:first").show();
var snsrname = j("#ulsensor option:selected").text(); //retrieve wanted status
if(snsrname == "All")
j("#example tr").show(); //show all rows if want to see All
else {
j("#example tr").each(function() { //loop over each row
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
}
}
The above code works perfectly and checks every row in the table.
But I want to exclude some rows based on its classname.
For example: There are 3 rows with classname GROUP and I need to exclude them from loop. Any help will be appreciated. Thanx in advance
Try using .not() method of jQuery :-
j("#example tr").not(".group").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
OR(You can use not the way shown below)
j("#example tr:not(.group)").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
Related
I am trying to delete an array record based on what table row is clicked.
This function adds a button to a row and appends it to the end of the table
function addButtons(table, tr){
var delBtn = document.createElement("button");
delBtn.innerHTML = "×"
delBtn.onclick = deleteBu(tr)
tr.appendChild(delBtn);
table.children[1].appendChild(tr)
}
The function below is meant to delete an array record based on the row clicked. For example, in row 1, the first cell is "45". Based on this, the record is deleted if it is found in the array storageProblem.
Here is what I have so far. The issue is because I am using tr as the action listener, so simply clicking on the row will delete the row, it is not localized to the button. But using tr is the only way I have found to get the first td of a row.
function deleteBu(tr){
$(tr).click(function(){
var value=$(this).find('td:first').html();
for(i = 0; i < storageProblem.length; i++){
if(value == storageProblem[i][0]){
storageProblem.splice(i, 14)
loadCallProblemTable()
}
}
})
}
I'm not sure if I've understood your question right but maybe try this solution:
function deleteBu(x) {
var Index = $(x).closest('tr').index();
console.log("Row index: " + Index);
}
I trying to get the text of input fields of each row and its columns on a save click button. Rows can be more than one. I want all the texts of all the rows and their respective columns.I don't know how to put it in a loop to get all the inputs values of more than one row. Below is what i tried to get only the one row input value and I am getting undefined :
$('#btnSave').click(function() {
$("#tab_logic").find('tr').each(function() {
if ($(this).find('input[type="text"]')) {
var data1 = $(this).find('td:eq(0):input[type="text"]').val();
alert(data1);
}
});
});
Any help would be very much appreciated. Thanks in Advance.
Loop through each td and then check if it has any text field using the length peroperty,
$("#tab_logic tr td").each(function() {
if ($(this).find('input[type="text"]').length > 0)) {
var data1 = $(this).find('input[type="text"]').val();
alert(data1);
}
});
To Get the values into an array, use
var arr = $("#tab_logic tr td input[type='text']").map(function() {
return $(this).val();
}).get();
The number of rows are dynamic so I cant fixate on the name of the row, here is the fiddle: http://jsfiddle.net/1vp29wxq/1/
$('.NameOfSensor').on("click", function () {
var tr = $(this).parents('tr:first');
var thisRow = tr.find(".rowMode");
var checkChecked = $("input[class='rowMode']:checkbox:checked");
var checkBoxes = $("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
What I get from that is that all check boxes are selected, but I just want the ones from the row where it is clicked. Also, whatever I tried I cant seem to incorporate the 2 variables (tr and thisRow) I created, can I get some help? Also, the number of columns in which the checkboxes are, are always 6 (sometimes I just hide them).
Change your code into this:
$('.NameOfSensor').on("click", function () {
var tr = $(this).closest('tr');
var checkChecked = $(tr).find("input[class='rowMode']:checkbox:checked");
var checkBoxes = $(tr).find("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
Your selector was wrong and got all rows.
Search for checkboxes within the clicked line:
var tr = $(this).closest('tr'); // fast alternative to `.parents('xxx:first')`
var checkChecked = $("input[class='rowMode']:checkbox:checked", tr),
checkBoxes = $("input[class='rowMode']:checkbox", tr);
DEMO: http://jsfiddle.net/1vp29wxq/2/
Notice that my first two table Data (Apple and Orange) are set to read-only. And I do have function for dynamic adding of row.
see this FIDDLE FOR DEMO
If the user click the Save button, all input field that detect duplicate of data from database or last duplicate of data from row which dynamically added, border-color will change to red.
$("#save").off("click").on("click",function(){
var $rows = $('#myTable tbody tr:not(:hidden)');
$rows.each(function(){
var $id = $(this).find('td input[type=\'text\']');
alert($id.val());
//Im stuck here, for checking column data is duplicate.
});
});
Im looking forward on using Jquery filter , like this :
$( "li" ).filter( "DUPLICATE DATA()" ).css( "border-color", "red" );
I am assuming you want to target the "Name" column, although you could easily change this to target all columns.
Basically, you want to go through the input elements, keeping a reference to the values you've already reviewed:
$("#save").off("click").on("click",function(){
var existing = [];
var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if (existing.indexOf(value) >= 0) {
return $(this);
}
existing.push(value);
});
duplicates.closest('tr').css('background-color', 'red');
});
JSFiddle
Edit: To avoid marking a read-only line as a duplicate, the process is a little less straightforward
$("#save").off("click").on("click",function(){
// Clear status of all elements
$('#myTable tr').css('background-color', 'none');
// Get all values first (Apple, Orange, etc) as strings
var allValues = $('#myTable td:nth-child(3) input').map(function() {
return $(this).val();
}).toArray();
// Iterate unique values individually, to avoid marking a read-only input as duplicate
var processedValues = [];
for (var i = 0; i < allValues.length; i++) {
var value = allValues[i];
if (value != '' && processedValues.indexOf(value) >= 0) continue;
var inputs = $('#myTable td:nth-child(3) input').filter(function() { return $(this).val() == value; });
// Check if this value is in one of the readonly
var readOnlyInput = inputs.filter(function() { return $(this).is('[readonly]'); });
if (readOnlyInput.length) {
inputs.not(readOnlyInput).closest('tr').css('background-color', 'red');
} else {
inputs.not(':first').closest('tr').css('background-color', 'red');
}
processedValues.push(value);
}
});
Updated JSFiddle
I have a table in HTML with pagination. I need to convert the table to csv. The following code used to get all visible rows in the current page of the table.
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).filter(':visible').find('td').each(function() {
if ($(this).css('display') != 'none')
tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
So, how can I select all rows in the table no matter pagination or not rather than select current visible rows. Please help me ! Thank you!
Try this
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).find('td').each(function() {
tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
Removed :visible check and following condition
$(this).css('display') != 'none'