How to add data to table on click of button using Javascript

Question

<html>
<head>

<style type="text/css">

table, th, td {
    position: relative;
   border: 1px solid black;
   width: 40%;
   height:40px;
   top: 5%;
}

</style>


<script type="text/javascript">

function lab() 
{
    var x= document.getElementById('lab').value;
    var rows="";
    rows+= "<tr><td>"+x+"</td></tr>";

}

function inp()
{
    var y= document.getElementById('inp1').value;
}

</script>
    </head>
        <body>
                <button id="lab" onclick="lab()" value="label">Label</button> 

                <button id="inp1" onclick="inp()" value="Input">Input</button> 

                <button id="res" onclick="reset()">reset</button>
            </body>

            <table id="me1">
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tbody></tbody>

            </table>

</html>

I am trying to add the text in the column of the table on the click of the button.

so please help me to add the text written on the button in the column of the table

thank you

Sorry for so much of explanation stackoverflow is trying to screw me with its pop up msg — Mayank Purohit
– Mayank Purohit, Commented Oct 20, 2016 at 18:42
Possible duplicate of Add data to table using onclick function in JavaScript — Anwar
– Anwar, Commented Oct 20, 2016 at 18:45
I tried to do but it doesnt work that way because it uses JQuery function appendto() which i am not allowed to have to do with the javascript only — Mayank Purohit
– Mayank Purohit, Commented Oct 20, 2016 at 18:48
minimal reproducible example, please. jsfiddle.net makes it easy. — Topological Sort
– Topological Sort, Commented Oct 20, 2016 at 20:03

sabithpocker · Accepted Answer · 2016-10-20 19:01:19Z

1

I don't understand your requirement completely, but you can use innerHTML to wipe out earlier contents and insert new. Or use appendChild and createElement to make and insert new elements on the go. The example demonstrates both with each button.

function lab() {
  var x = document.getElementById('lab').value;
  var rows = "";
  rows += "<tbody><tr><td>" + x + "</td></tr></tbody>";
  document.getElementById('me1').innerHTML = rows;

}

function inp() {
  var table = document.getElementById('me1');
  var tbody = table.getElementsByTagName('tbody')[0];
  var y = document.getElementById('inp1').value;
  var text = document.createTextNode(y);
  var col = document.createElement('td');
  var row = document.createElement('tr');
  col.appendChild(text);
  row.appendChild(col);
  tbody.appendChild(row);
}

table,
th,
td {
  position: relative;
  border: 1px solid black;
  width: 40%;
  height: 40px;
  top: 5%;
}

<button id="lab" onclick="lab()" value="label">Label</button>

<button id="inp1" onclick="inp()" value="Input">Input</button>

<button id="res" onclick="reset()">reset</button>
</body>

<table id="me1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tbody></tbody>

</table>

answered Oct 20, 2016 at 19:01

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Towkir Over a year ago

lets just not merge the two td (column) into one, and how about adding a reset function too ? :)

sabithpocker Over a year ago

@Towkir OP could get around those with a few trial and error I guess :) Lets save some space for learning as well.

Towkir Over a year ago

Sounds great, he can take my comment as his assignment I guess :p

Primesh · Accepted Answer · 2019-04-07 14:09:26Z

I have been also trying out how to input values into HTML table with the click of a button, and I found out this simple way by just using innerHTML and the id of the td tag. I have reformatted your code, hope this would be useful.

<!DOCTYPE html>
<head>

<style type="text/css">

table, th, td {
    position: relative;
   border: 1px solid black;
   width: 40%;
   height:40px;
   top: 5%;
}

</style>


<script type="text/javascript">

function lab() 
{
    var x= document.getElementById('lab').value;
    document.getElementById('00').innerHTML=x;

}

function inp()
{
    var y= document.getElementById('inp1').value;
    document.getElementById('01').innerHTML=y;
}

</script>
    </head>
        <body>
                <button id="lab" onclick="lab()" value="label">Label</button> 

                <button id="inp1" onclick="inp()" value="Input">Input</button> 

                <button id="res" onclick="reset()">reset</button>
            </body>

            <table id="me1">
                <tr>
                    <td id='00'></td>
                    <td id='01'></td>
                </tr>
                <tbody></tbody>

            </table>

</html>

Collectives™ on Stack Overflow

How to add data to table on click of button using Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related