Javascript: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 17: Line 17:
* from JSON hash: [http://stackoverflow.com/questions/9071525/how-to-create-html-select-option-from-json-hash javascript - How to create HTML select option from JSON hash? - Stack Overflow]
* from JSON hash: [http://stackoverflow.com/questions/9071525/how-to-create-html-select-option-from-json-hash javascript - How to create HTML select option from JSON hash? - Stack Overflow]
* from javascript array: [http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array JavaScript - populate drop down list with array - Stack Overflow]
* from javascript array: [http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array JavaScript - populate drop down list with array - Stack Overflow]
HTML DOM selected
* HTML<ref>[http://www.w3schools.com/tags/att_option_selected.asp HTML option selected Attribute]</ref>
* jQuery: [http://api.jquery.com/prop/ .prop()]<ref>[http://stackoverflow.com/questions/1280369/jquery-set-selected-option-using-next select - jQuery Set Selected Option Using Next - Stack Overflow]</ref>


== Display or hide the element by id ==
== Display or hide the element by id ==

Revision as of 16:24, 17 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_");

Changing HTML Content

Create HTML select option

HTML select form Attribute

HTML DOM selected

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[5]
  • $('#selector_id:not([style*="display: none"])').length; Icon_exclaim.gif jQuery v.1.9.1 + IE Browser msie.png v.8 not work

count the number of all table rows (includes visible and invisible rows)

  • document.getElementById( table_id ).rows.length;

references