CODEWITHSUNDEEP
javascripthtmlarrayshtml-lists
Asiya Fatima
Asiya Fatima

Reputation: 1438

Javascript: Orderlist items In Table

I am working on task using javascript in table.I am trying to add order-list but stuck in that code. when clicking a button a table is displaying that i have achieve.but the thing it should display with numericals i need to add order-list also.Please anyone who can help me to solve these.Taking Inspiration from here, But my code is not working codepen.Please someone point me in right direction.

Output:enter image description here

Thanks in Advance. 

<html>
<head></head>
<body>
	<h3>JavaScript Programming</h3>
	<hr/> 	
	<input type="button" onclick="f1()" value="Get Data"  />
	<br/>
	<br/>
	<table id="table1"  border="2">	
	</table>
	
	<script>	
		function  f1() {
			var  ar = ["HTML5", "CSS3", "JavaScript", "Angular JS", "Node JS", "Express JS"];
						
			var  str  =  "";
			for(var i  in  ar)
			{
				str =  str  +   "<tr><td>" +  ar[i]  +  "  </td> </tr>";
			}
					 
			var obj = document.getElementById("table1");
			obj.innerHTML  = str;
		}	
	</script>
</body>
</html>

Upvotes: 0

Views: 306

Answers (1)

Ghoul Ahmed
Ghoul Ahmed

Reputation: 4836

you must first define listOfList as array 

 const listOfList = []

and second change element by ar[i]

listOfList.push("<li>" + ar[i] + "</li>");


function f1() {
    const listOfList = [];
    const ar = ["HTML5", "CSS3", "JavaScript", "Angular JS", "Node JS", "Express JS"];
   

    let str = "";
    for (let i in ar) {
        str = str + "<tr><td>" + (+i+1)+ "."+ ar[i] + "  </td> </tr>";
        listOfList.push("<li>" + ar[i] + "</li>");
    }

    const obj = document.getElementById("table1");
    obj.innerHTML = str;

}
<html>
<head></head>
<body>
	<h3>JavaScript Programming</h3>
	<hr/> 	
	<input type="button" onclick="f1()" value="Get Data"  />
	<br/>
	<br/>
	<table id="table1"  border="2"></table>
</body>
</html>

Upvotes: 1

Related Questions