I have a page I created with jQuery, and in this page is a table where the table rows have classnames that identify them as a certain color (i.e. tr class="yellowclass").
The user is able to filter rows by clicking a checkbox that will show/hide tables of a certain color.
My problem is that the table is generated on the fly via getJSON requests. to add the new content to the table, I first do a children().remove() on the table's tbody, ($('#my_table_tbody').children().remove()), and then I use appendTo to add the new table information back in.
an example of this function is:
$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
var mylength = j.length;
for (var k = mylength - 1; k >= 0; k--)
$('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>').appendTo($('#my_table_tbody'));
});
Now at the end of this function, I am trying to check to see if checkboxes are checked, and if so, to show/hide the new information. For example, to basically call
if (('#my_yellow_color_cb').attr('checked'))
$('.yellowclass').show();
else
$('.yellowclass').hide();
The problem is, the page isn't wanting to "remember" what has been checked. In other words, if the 'yellowclass' check box is unchecked, and the page reloads with new table data, the yellowclass class is still showing up, when it really should be hidden.
i suspect this has something to do with the DOM, and creating proper DOM elements that can be shown/hidden. But i don't know how to do this in my particular situation. I am a systems programmer, and am just doing this to program a tool that would provide our testers with some status info. i am no expert when it comes to JavaScript and have little understanding of the DOM, and can't seem to figure this one out.
How can I insert into the page so that I can properly show and hide this information?
If I update the page with new table data, and then check and uncheck boxes, then things work fine. But if I load table data, and just check the status of the boxes as they are, it's not wanting to work. Does jQuery take a little time to get DOM objects created before they can be accessed?
Thanks for any help.
Perhaps something like this?
$('#my_table_tbody').children().remove();
$.getJSON("http://my_url.com/my_cgi_bin/my_cgi", {data: mydata}, function(j) {
var mylength = j.length;
for (var k = mylength - 1; k >= 0; k--) {
var $row = $('<tr class="' + j[k].color + '"><td class="my_first_col_class">' + j[k].data1 + '</td><td class="my_second_col_class">' + j[k].data2 + '</td></tr>');
if ($('#my_yellow_color_cb:checked').length == 0 && $row.is('.yellow'))
$row.hide();
$row.appendTo('#my_table_tbody');
}
});
Basically, each row is created as a DOM fragment and then the conditional is run. If $('#my_yellow_color_cb:checked').length is 0, meaning the yellow color check box is not checked, then .hide() is executed for the row. Then, the row is added to the end of the tbody. You'll want to extend the if statement with more logic for your other colors.
Related
i'm using wenzhixin bootstrap table, and I have a lot of tables in the same page and one button, and when the button is clicked i want to gather all the selected rows from all the different tables.
so,
in my JS code i did: (Ids is an array with all the tables IDs)
for (var i = 0; i < Ids.length; i++)
{
var domain = $.map($('#' + Ids[i] + '').bootstrapTable('getSelections'), function (row)
{
// do something with row object...
});
}
but it's not working...
please help!
it was my mistake, as some of the id's contain a vertical bar character | and it is not a valid character for id in JavaScript. the $.map function returned an error because of the id with the vertical bar.
I am attempting to use the easyDropDown.js add on to style my drop boxes but I have encountered an issue. My drop box is not statically created. When the webpage is loaded an array is used to append the drop down list. This drop box appears on multiple pages of my website and I am attempting to set it up so that when the user makes a selection on one page, that selection carries to every page.
Here's a step by step play-through of what the code is doing:
When the page is started it appends the easyDropDown list so that all the values are there.
$('#homeSelectSite').empty();
s = "";
s = "<option value='site'>Site</option>";
for (var i = 0; i < Sites.length; i++) {
s = s + "<option value='" + Sites[i].SiteID + "'>" + Sites[i].SiteID + " " + Sites[i].SiteName + "</option>";
}
$('#homeSelectSite').append(s);
Note: Sites is the array that I am using to fill the drop box.
Now once the drop box list has been created I need to set what value is selected. This value is set in the sessionStorrage if the user has made a selection on another page.
$('#homeSelectSite').easyDropDown();
var selectedSite = sessionStorage.getItem("CurrentSiteID");
if (selectedSite != undefined && selectedSite != null) {
$('#homeSelectSite').val(selectedSite);
}
So what the code is doing is this: emptying the current drop box, appending it with new values, styling it with easyDropDown, and finally setting the selected value. For some reason this will not work. The appending and styleing are working just fine but it will not allow me to set the selected value. I have also tried using this:
$('#homeSelectSite').easyDropDown('select', selectedSite);
Is there a reason why I cannot set the selected value? This all works if I remove everything related to easyDropDown.
I had a similar issue today as I was trying to set the selected value of a dropdown using easyDropDown.
What I did to fix it was to find out the index of the to-be selected option, rather than selecting it by value.
In your case it would be something like:
var index = 0;
$('#homeSelectSite option').each(function(i, item) {
if ($(this).val() === selectedSite) {
index = i;
}
});
$('#homeSelectSite').easyDropDown('select', index);
Hope it helps.
it looks like there's a bug in easyDropDown 2.1.4
Line 326 should be changed from:
index = self.$select.find('option[value='+index+']').index() - 1;
to:
index = self.$select.find('option[value='+index+']').index();
This will only solve the fact that easyDropDown was selecting the previous item instead of the one you wanted, but I'm not sure this would solve your issue. And yes, you must use the 'select' method from the plugin instead of 'val'.
Is there any way to figure out which cell position is clicked if you have merged table cells? We have 20 cells etc merged together and we would like to figure out if the user has clicked on what would have been for example the 7th cell
We have merged cells which mean specific things but we now need to figure out logically which cell was clicked by a user (even though they are merged).
Is this possible?
You can judge it based on the dimensions of unmerged cells in the same table. Here is an example using jQuery (just because it's much more concise than native JS to demonstrate this point):
var $mergedTd = $('td.myMergedTd'),
$unmergedThs = $('th');
$mergedTd.click(function(e) {
var clickedUnmergedIndex = 0;
$unmergedThs.each(function(i) {
var $th = $(this);
if(e.pageX < $th.pageX + $th.width()) {
clickedUnmergedIndex = i;
} else {
// Stop iterating; we've found the unmerged index
return false;
}
});
alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});
I would keep two copies of that table in DOM. One visible and one hidden. You take click events on the visible table, and before you merge the cells, mark the clicked cell (e.g. add a data attribute to it indicating it was marked such as data-marked='1') and copy that table to the hidden one.
Is it possible to focus on a specific HTML table row/cell with the help of Javascript? For instance, if this row is after the browser fold then the browser would scroll down to the row upon focus.
I have some JS code that searches an HTML table for a user's string input. I would then like for this code to focus on this word if it is found (Safari/Chrome browsers).
var targetTable = document.getElementById("accountTable");
for (var rowIndex = 1 + searchStart; rowIndex < targetTable.rows.length; rowIndex++)
{
var rowData = '';
rowData = targetTable.rows.item(rowIndex).cells.item(0).textContent;
if (rowData.indexOf(str) != -1)
{
//focus on the row?
}
}
You could give each row a HTML ID (either dynamically or statically depending on your needs) which matches the content and then use URI fragments to focus on it. You could basically use your current code and use
location.hash = rowData;
If the content matches the user input. This would of course be cumbersome if you've got whole sentences in the row you want to focus on, but for a simple table, it would work.
I was able to achieve this by using scrollIntoView().
I've been editing someone else's code for a project, and I stumble every now and then when trying to figure how certain Javascript functions are doing their thing.
Essentially I want to add a remove row button, however it's causing headaches.
So the text for the dynamically generated row is done by this PHP variable:
$rowtext .= '<tr>something</tr>';
and then the function to generate the row in Javascript:
function generateRow(x) {';
var row_prototype = \'' . $rowtext . '\';
return row_prototype.replace(/\[index\]/g, x);
}
When the add row button is clicked it performs this action:
rowIndex = 1;
function addRow() {
var nr = generateRow(rowIndex);
rowIndex = rowIndex + 1;
jQuery(\'tbody\').append(nr);';
}
I'd presume I'd need to do a similar function to be performed on click, taking into account the rowIndex etc.
Anyone have any ideas?
Essentially it's to remove the last row that has been generated by the above code... so remove row rowIndex == 5 or something
Since you mentioned last row in the comments you can use :last selector to get the last row, Try something like below,
$('#removeRow').click(function () {
$('#table_selector tbody tr:last').remove();
});
And a button like below somewhere in your markup,
<button id="removeRow">Remove a Row</button>
Note: you need to revise #table_selector tbody with specific table ID/Class.