CODEWITHSUNDEEP
javascripthtml
Doggy
Doggy

Reputation: 63

Adding data into a table and saving it into a database

I've created a form when the user inputs the number of rows of the table which corresponds to number of subjects.I want the user to insert data into this table's columns or to fill it.How can i make this because my table just stands there chillin' and i can't insert data into it. This is my code. Please someone shows me how to insert data into the columns of this table instead of phrases"one" and "two" i've used for demonstration.This code doesn't have errors so works very well.

<html>
<head>
	<title>
	</title>
</head>
<body>
Insert nr of subjects	 
<input type="text" id="row"></input>
<button onclick="myFunction()" >Sub </button>
<div id="container"></div><!--hapesira qe i kemi lene tabeles ne faqe-->
<script>

function myFunction(){


    //Get the value the user gave
    var nr = document.getElementById("row").value;
    //e kthej ne int nga string qe esht
    var c=parseInt(nr);
    var div=document.getElementById("container");
     div.innerHTML = " ";
      div.innerHTML += "<table border='1' id='table'>";
     document.getElementById('table').innerHTML += "<tr><td>SUBJECT</td><td>POINTS</td></tr>"; 

      for (i = 0; i < c; i++) {

        //Write the rows and cells
        document.getElementById('table').innerHTML += "<tr><td>  one </td><td>  two </td></tr>";
}
}
</script>
</body>
 </html>

Upvotes: 0

Views: 4283

Answers (3)

Sachin Thapa
Sachin Thapa

Reputation: 3709

Please add input elements when you are adding rows. Try this:

<html>
<head>
	<title>
	</title>
</head>
<body>
Insert nr of subjects	 
<input type="text" id="row"></input>
<button onclick="myFunction()" >Sub </button>
<div id="container"></div><!--hapesira qe i kemi lene tabeles ne faqe-->
<script>

function myFunction(){


    //Get the value the user gave
    var nr = document.getElementById("row").value;
    //e kthej ne int nga string qe esht
    var c=parseInt(nr);
    var div=document.getElementById("container");
     div.innerHTML = " ";
      div.innerHTML += "<table border='1' id='table'>";
     document.getElementById('table').innerHTML += "<tr><td>SUBJECT</td><td>POINTS</td></tr>"; 

      for (i = 0; i < c; i++) {

        //Write the rows and cells
        document.getElementById('table').innerHTML += "<tr><td><input type='text' id= 'sub'> </td><td><input type='text' id='points'></td></tr>";
}
}
</script>
</body>
 </html>

Cheers !

Upvotes: 0

IrkenInvader
IrkenInvader

Reputation: 4050

I changed your code to insert inputs instead of "one" and "two", with classes subject and points. To store this information you will have to grab each row of your table and pull out the value of those inputs, and store it in the database.

function myFunction(){


    //Get the value the user gave
    var nr = document.getElementById("row").value;
    //e kthej ne int nga string qe esht
    var c=parseInt(nr);
    var div=document.getElementById("container");
     div.innerHTML = " ";
      div.innerHTML += "<table border='1' id='table'>";
     document.getElementById('table').innerHTML += "<tr><td>SUBJECT</td><td>POINTS</td></tr>"; 

      for (i = 0; i < c; i++) {

        //Write the rows and cells
        document.getElementById('table').innerHTML += '<tr><td><input type="text" class="subject" /></td><td><input type="text" class="points"/></td></tr>';
}
}

Upvotes: 1

Scott Saunders
Scott Saunders

Reputation: 30394

You use HTML input elements to allow the user to enter data into a form. http://www.w3schools.com/tags/tag_input.asp

Upvotes: 0

Related Questions