Javascript: Difference between revisions
Jump to navigation
Jump to search
| Line 24: | Line 24: | ||
** <nowiki>$("#selector_id").css("display", "none");</nowiki> | ** <nowiki>$("#selector_id").css("display", "none");</nowiki> | ||
== | == Count the number of visible table rows == | ||
* <nowiki>$('#selector_id:visible').length;</nowiki> jQuery v.1.9.1<ref>[http://stackoverflow.com/questions/2931893/jquery-selector-to-count-the-number-of-visible-table-rows jquery selector to count the number of visible table rows? - Stack Overflow]</ref> | * <nowiki>$('#selector_id:visible').length;</nowiki> jQuery v.1.9.1<ref>[http://stackoverflow.com/questions/2931893/jquery-selector-to-count-the-number-of-visible-table-rows jquery selector to count the number of visible table rows? - Stack Overflow]</ref> | ||
* <nowiki>$('#selector_id:not([style*="display: none"])').length;</nowiki> {{exclaim}} jQuery v.1.9.1 + {{IE}} v.8 not work | * <nowiki>$('#selector_id:not([style*="display: none"])').length;</nowiki> {{exclaim}} jQuery v.1.9.1 + {{IE}} v.8 not work | ||
Revision as of 10:37, 16 February 2013
Javascript approaches to do the same task
Get the document by id
- document.getElementById('abcId')
- alternative: (1) Get the id attribute by using jQuery attr(): $("selector").attr("id");[1] (example) and (2) go to the first step
- parallel naming rules for html elemnt tags ex: (1)<input id='checkbox_id1' > & <select id="select_id1"> (2)Replace the input id to select id. Code snippet as follows:
var selectId = inputId.replace("checkbox_", "select_");
Create HTML select option
- from JSON hash: javascript - How to create HTML select option from JSON hash? - Stack Overflow
- from javascript array: JavaScript - populate drop down list with array - Stack Overflow
Display or hide the element by id
- HTML DOM Style object
- document.getElementById( selector_id ).style.display = "none";
- Using jQuery .show() or .hide():
- $("#selector_id").show(); or
- $("#selector_id").hide();
- Using jQuery .css():
- $("#selector_id").css("display", ""); or $("#selector_id").css("display", "block");
- $("#selector_id").css("display", "none");
Count the number of visible table rows
- $('#selector_id:visible').length; jQuery v.1.9.1[2]
- $('#selector_id:not([style*="display: none"])').length;
jQuery v.1.9.1 + IE 
v.8 not work
count the number of all table rows (includes visible and invisible rows)
- document.getElementById( table_id ).rows.length;