1

var sa = 5; var gacchi =5; window.onload = function() { myButton.onclick = onClick; heading = document.createElement("h2"); heading_text = document.createTextNode("Other information"); heading.appendChild(heading_text); document.body.appendChild(heading); } function onClick() { alert('Click!') } function addH3() { heading = document.createElement("h3"); heading_text = document.createTextNode("One more information"); heading.appendChild(heading_text); document.body.appendChild(heading); } function addBorders() { var table = document.getElementById("myTable"); table.border = "1px solid"; } function showElementAttrs(outputId) { let elementId = document.getElementById("userElementId").value; var elementAttrs = document.getElementById(elementId).attributes; for (var i = 0; i < elementAttrs.length; i++) { document.getElementById(outputId).innerHTML += elementAttrs[i].nodeName.toLowerCase() +": " + elementAttrs[i].value +"

"; } } function recolorOddTR() { var table = document.getElementById("myTable"); var rows = table.querySelectorAll('tr'); for (var i = 0; i < rows.length; i+=2) { rows[i].style.backgroundColor="green"; } } function recolorEvenTR() { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName('tr'); for (var i = 1; i < rows.length; i+=2) { rows[i].style.backgroundColor="blue"; } } function recolorFirstColumn() { document.getElementById("myTable").rows[0].cells[0].style.backgroundColor="orange"; document.getElementById("myTable").rows[1].cells[0].style.backgroundColor="orange"; document.getElementById("myTable").rows[2].cells[0].style.backgroundColor="orange"; document.getElementById("myTable").rows[3].cells[0].style.backgroundColor="orange"; } function resetCellsColor() { var table = document.getElementById("myTable"); for (var i = 0; i < table.rows.length; i++) for (var j = 0; j < table.rows[i].cells.length; j++) { table.rows[i].cells[j].style.backgroundColor="white"; } } function addTableRow() { var table = document.getElementById("myTable"); row = document.createElement("tr"); col1 = document.createElement("td"); col2 = document.createElement("td"); col3 = document.createElement("td"); col4 = document.createElement("td"); col1.appendChild(document.createTextNode("5")); col2.appendChild(document.createTextNode("5")); col3.appendChild(document.createTextNode("5")); col4.appendChild(document.createTextNode("5")); cum +=1; row.appendChild(col1); row.appendChild(col2); row.appendChild(col3); row.appendChild(col4); table.appendChild(row); } function addTableColumn() { var table = document.getElementById("myTable"); for (var i = 0; i < table.rows.length; i++) { col = document.createElement("td"); col_text = document.createTextNode(i+1); col.appendChild(col_text); table.rows[i].appendChild(col); } } function Ex1() { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName('td'); for (var i = 1; i < rows.length; i+=2) { rows[i].style.backgroundColor="red"; } } function Ex2(){ var table = document.getElementById("myTable"); var rows = table.getElementsByTagName('td'); for (var i = 0; i < rows.length; i+=2) { rows[i].style.backgroundColor="orange"; } } function Ex3(){ var table = document.getElementById("myTable"); for (var i = 0; i < table.rows.length; i++) for (var j = 0; j < table.rows[i].cells.length; j++) { table.rows[i].cells[j].style.backgroundColor="white"; } } function generateColor() { return '#' + Math.floor(Math.random() * 16777215).toString(16) } function Ex4(){ var table = document.getElementById("myTable"); var rows = table.getElementsByTagName('td'); for (var i = 0; i < rows.length; i+=1) { rows[i].style.backgroundColor = generateColor(); } } function Ex5(){ var table = document.getElementById("myTable"); row = document.createElement("tr"); col1 = document.createElement("td"); col2 = document.createElement("td"); col3 = document.createElement("td"); col4 = document.createElement("td"); col1.appendChild(document.createTextNode(sa)); col2.appendChild(document.createTextNode(sa)); col3.appendChild(document.createTextNode(sa)); col4.appendChild(document.createTextNode(sa)); sa +=1; row.appendChild(col1); row.appendChild(col2); row.appendChild(col3); row.appendChild(col4); table.appendChild(row); } function Ex6(){ var table = document.getElementById("myTable"); for (var i = 0; i < table.rows.length; i++) { col = document.createElement("td"); col_text = document.createTextNode(i+1); col.appendChild(col_text); table.rows[i].appendChild(col); } } table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; text.value += "mouseover " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; }; table.onmouseout = function(event) { let target = event.target; target.style.background = ''; text.value += "mouseout " + target.tagName + "\n"; text.scrollTop = text.scrollHeight; }; My title Some information 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4

Try it