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
2 answers
solution1
1 ACCPTED 2016-10-20 19:01:19
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>
solution2
0 2019-04-07 14:09:26
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.