Javascript

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"); (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

• Using jQuery .html() $("#selected_id").html(htmlStr);
• JavaScript HTML DOM Changing HTML Content document.getElementById(selected_id).innerHTML = htmlStr; I met technical issue to replace the select text in IE v.8

Create HTML select option

HTML select form Attribute

• 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

HTML DOM selected

• HTML
• jQuery: .prop()
• jQuery .attr() ex: $("#myDropDown option:text=" + myText +"").attr("selected", "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
• $('#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;

compression tools

• Minify Javascript Online / Online JavaScript Packer

troubleshooting steps

1. Using the javascript library? Is the function was supported by the version of javascript library?
2. Check Browser Compatibility