1
\$\begingroup\$

I made a function to dynamically create this table and a button with a function to display texts inside the table shown as a message.

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">

</table>
<br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    cell1.innerHTML = "please";
    cell2.innerHTML = "put";
    cell3.innerHTML = "information";
    cell4.innerHTML = "here";
    cell5.innerHTML = "fill";
    cell6.innerHTML = "up";
}
</script>

</body>
</html>
\$\endgroup\$
2
  • \$\begingroup\$ My goal is to create a function to dynamically create a 6 or 5 input boxes with a table and make a button use function as well to display the text inside to display as a message \$\endgroup\$
    – Sean L
    Commented Oct 25, 2017 at 11:21
  • \$\begingroup\$ Welcome to Code Review. Note that we can review your existing working code, but we cannot help you add new features to your code. \$\endgroup\$ Commented Oct 25, 2017 at 13:15

1 Answer 1

1
\$\begingroup\$

So you want for example 6 inputs and create a table from it with the input when you click on a button.

(plain javascript):

This way it doesn't matter how many input fields you have. It will get all of them. I added some comments so you can understand what's going on.

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">

</table>
<br>

<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<button onclick="Display_inputs()">Try it</button>

<script>
function Display_inputs() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    //Gets all the input fields
	var input = document.getElementsByTagName('input');
    //start from 0 till the length of input fields
		for(var i = 0, l = input.length; i < l; i++){
    	//creates a new cell every time it loops so in this case
        //it loops 6 times
        var cell = row.insertCell(i);
   		cell.innerHTML = input[i].value;
		}
}
</script>

</body>
</html>

\$\endgroup\$
2
  • \$\begingroup\$ Thank you very much, that really helps me a lot.But I still got a question. you see, i have two functions need to done, one displays the message which already solved.another one is on file load it should invoke a JS function to dynamically create a table with some default text.(For example : Put information here...) \$\endgroup\$
    – Sean L
    Commented Oct 25, 2017 at 14:19
  • \$\begingroup\$ You can make make another function for that and loop that the same way but instead of outputting the input[i].value you can make a variable 'information here' and display that instead to load it directly you need to use onload more info link \$\endgroup\$
    – Heldoe
    Commented Oct 25, 2017 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.