I was trying to create a program to add rows dynamically using Javascript in HTML Table using the Add Row Button. There seems to be an error.
<html>
<head>
<title>Home - First Website</title>
<style>
table{
width: 100%;
}
td{
padding: 8px;
border: 1px solid;
}
input[type="text"]{
width: 100%;
}
</style>
<script type="text/javascript">
function add(){
var num=parseInt(document.getElementById("t1").length+1);
var a=document.createElement("td");
var anode=document.createTextNode(num);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
var b=document.createAttribute("type");
b.value="checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
b=document.createAttribute("type");
b.value="text";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
}
</script>
</head>
<body>
<table name="t1">
<tr>
<input type="button" value="Add Row" onclick="add()">
</tr>
<tr>
<td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
</tr>
</table>
</body>
</html>
There are multiple problems in the code :
1) for adding row why are you doing this :
var num=parseInt(document.getElementById("t1").length+1);
: please note you haven't given your table any id.
I think you need count to number your rows. You can get that by :
var num =document.getElementById("t1").rows.length;
2) For adding a row, you have not created <tr> element!
Here's the corrected jsFiddle :
http://jsfiddle.net/thecbuilder/kCm2D/1/
update : changed the way to get number of rows.
js
function add() {
var num = var num =document.getElementById("t1").rows.length;
console.log(num);
var x = document.createElement("tr");
var a = document.createElement("td");
var anode = document.createTextNode(num);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
var b = document.createAttribute("type");
b.value = "checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
b = document.createAttribute("type");
b.value = "text";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
document.getElementById("t1").appendChild(x);
}
html
<table id="t1" name="t1"> <!-- "t1" is id as well -->
<tr>
<input type="button" value="Add Row" onclick="add()" />
</tr>
<tr>
<td>1.</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>
You're using getElementById but your table has a name not an id.
<table name="t1">
to
<table id="t1">
The error is on document.getElementById("t1"), but your table doesn't have an id="t1", it has a name="ti".
Update to this:
<table id="t1">
Related
Click the add button, add a new row to the table
You can create a string similar to your HTML code, that represents the row:
var new_row='<tr>'
+ '<td><input type="text" id="firstName" name="firstName"></td>'
+ '<td><input type="text" id="lastName" name="lastName"></td>'
+ '<td><input type="radio" id="gender" name="gender"></td>'
+ '</tr>';
I have created only some part of it, you need to add everything your case requires. Then this JS can be used to add the new row to your table:
document.getElementById('table_id').append(new_row);
#neversaynever, have you tried anything, well use this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + fname + "</td><td>" + lname + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
<input type="text" id="email" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>rst</td>
<td>xyz</td>
<td>xyz#gmail.com</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
</body>
</html>
In order to append a new row to an existing table, you can call a function with the following on the button click event of Add.
var table = document.getElementById("table_name");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//Rest of the required field data (td) will be declared here
var firstname = document.createElement('input');
firstname.type = 'text';
var lastname = document.createElement('input');
lastname.type = 'text';
//CReate the rest of the elements and append them to the respective <td>
td1.appendChild(firstname);
td2.appendChild(lastname);
//Append the remaining elements
//Then Append the <td>s to the row
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
To create the radio buttons within the Gender column, you can either present the code within the above function itself or extract it to a separate function and append the newly created radio button division to the respective td when above. The code to create a radio button division is shown here.
var objDiv = document.getElementById("radioDiv");
var radioItem1 = document.createElement("input");
radioItem1.type = "radio";
radioItem1.name = "radioGender";
radioItem1.id = "radio1";
radioItem1.value = "Male";
radioItem1.defaultChecked = true;
var radioItem2 = document.createElement("input");
radioItem2.type = "radio";
radioItem2.name = "radioGender";
radioItem2.id = "radio2";
radioItem2.value = "Female";
var objTextNode1 = document.createTextNode("Male");
var objTextNode2 = document.createTextNode("Female");
var objLabel = document.createElement("label");
objLabel.htmlFor = radioItem1.id;
objLabel.appendChild(radioItem1);
objLabel.appendChild(objTextNode1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = radioItem2.id;
objLabel2.appendChild(radioItem2);
objLabel2.appendChild(objTextNode2);
objDiv.appendChild(objLabel);
objDiv.appendChild(objLabel2);
Once the objDiv is created, simply append it to td3.
Likewise the following Mark field and COE fields can be created and appended as well.
I have designed a html table where table rows with data are dynamically generated.In each table row tr, i set 1 table data td for html select tag and 1 table data td for html input tag.So i want to insert the selected option value into its adjacent input field.Also i want to keep a Remove functionality to remove each table row.
Here is my code:
$(document).on('change', '#mySelect', function() {
if ($(this).val != 0) {
$('.amount').val($(this).val());
} else {
$('.amount').val('');
}
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parent('tr').remove();
i--;
}
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
Remove
<select id="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>
So the problem is all inputs are taking same option values. i think it is due to lack of uniqueness of each input tag as i use class instead of id.Also Remove hyperlink not working.please help.
Like said, you should use class instead of id, and look closely on change event handler i make, same goes to remove functionality, see following code :
$('#myTable').on('change', '.mySelect', function() {
// you can use .closest() to find
// particular input on same row with select
$(this).closest('tr').find('.amount').val($(this).val());
});
$('#myTable').on('click','.remScnt', function(e) {
e.preventDefault();
// find the tr element of remove link
// which is a parent
$(this).closest('tr').remove()
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
var tableTr = document.getElementById("myTable").rows.length;
if ( tableTr > 1 )
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
Remove
<select class="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>
I have three input box and below one button
when I click that button I want input data should come into html table and sholud able to delete that record
Kindly help me out
advance thanks
I did the same with one input box. So making it for three shouldn't be an issue. You must be looking out for this code:
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
You can either press Enter or click on the button to insert temp data. Okay, just heads up, as you didn't put enough code, you can do it this way:
$(function () {
$("#tempInsert").keyup(function (e) {
if (e.keyCode == 13)
insertRow();
});
$("#tempBtn").click(function () {
insertRow();
});
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
});
function insertRow() {
if ($("#tempInsert").val().length > 0)
$("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">×</td></tr>');
$("#tempInsert").val("");
}
* {font-family: 'Segoe UI'; text-decoration: none;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="text" id="tempInsert" />
<input type="button" id="tempBtn" value="Add" />
<table width="100%">
<thead>
<tr>
<th width="85%">Stuff</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
I supposed that you are absolutely new and I wrote a simple example for you, just to get the idea of how to do.
HTML
<table style="border: 1px solid red; width: 200px; height: 80px; ">
<tr>
<td id="nm"></td>
</tr>
<tr>
<td id="fnm"></td>
</tr>
<tr>
<td id="ag"></td>
</tr>
</table>
Name : <input type="text" id="n"><br />
F/Name: <input type="text" id="fn"><br />
Age : <input type="text" id="age"><br />
<button>Click</button>
SCRIPT
$(function(){
$('button').click(function(event) {
$('#nm').text($('#n').val());
$('#fnm').text($('#fn').val());
$('#ag').text($('#age').val());
$('#n').val('');
$('#fn').val('');
$('#age').val('');
});
});
$('#submitBtn').click(function(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
$('#td1').html(input1);
$('#td2').html(input2);
$('#td3').html(input3);
});
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
Try this Demo
function Add() {
var tbl = document.getElementById("tbl");
var fname = document.getElementById("FName").value;
var lname = document.getElementById("LName").value;
var city = document.getElementById("City").value;
if (fname == "" && lname == "" && city == "")
alert("Enter Text in input box");
else {
var tblcount = tbl.rows.length;
var row = tbl.insertRow(tblcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = city;
}
}
#tbl tr td {
padding: 0 10px;
}
<input id="FName" type="text"></input>
<input id="LName" type="text"></input>
<input id="City" type="text"></input>
<button id="btnAdd" onclick="Add();">Add</button>
<table id="tbl">
<tr>
<td>Fisrt Name</td>
<td>Last Name</td>
<td>City</td>
</tr>
</table>
Below is a form when submitted displays the content in a table.
What works
Content is successfully transferred via form to table.
What is not working
I wanted to hide the table when the page loads and be displayed only after the form is submitted.
I tried #myTableData {visibility: hidden;} in css and then I tried plugging (.style.visibility="visible";) Javascript in my addtable function to display the table but it does not work. I am not sure if I am understanding this right.
Also how do I control the display of the table (like width, background color, font etc). I added (td.style.width = '200px'; but I don't see any changes).
CSS or JS for controlling table ?
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
1) In function addRow add table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData");.
2) To set styles like width you can can use setAttribute method.
document.getElementById('myTableData').setAttribute("style","width:200px");
Note: I can't see where you make use of addTable function, maybe this is why some of styles are not setted when you want.
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
table.style.visibility = "visible";
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
I don't have the rep to comment so I can't ask for details, but just in case you can use jquery, you can hide and show stuff like this:
$(function(){
$("#add").click(function() {
var name = $('#name').val();
var domain = $('#domain').val();
var url = $('#url').val();
$('#hidey').show();
$('#nametd').html(name);
$('#domtd').html(domain);
$('#urltd').html(url);
})
});
https://jsfiddle.net/6dxLsnL4/
Or trigger on form submit instead of click if you want, but there, you might want to consider ajax, because then you can make sure the form is processed on the server side before displaying the results.
I'm a high-school student trying to make a proof writing program. I just need the JS function Edit() to send the value of the first text-box to the table. Any ideas? I know the code is messy, I'll fix it later.
Code:
<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
<form id='user-input'>
<input type='text' id='given' placeholder='Given Information'></input>
</form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
<form id='user-input'>
<input type='text' id='prove' placeholder='Statement to Prove'></input>
</form>
<button id='Submit' Value='Edit' onClick="edit()">Submit</button>
<script>
function edit()
{
var x = document.getElementById('given').value;
var y = document.getElementById('prove').value;
document.getElementById('Test').innerHTML.value=var x
}
</script>
<br>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
<tr>
<th>Step Number</th>
<th>Step</th>
<th>Explaination</th>
</tr>
<tr>
<td>1</td>
<td id='Test'></td>
<td>Given</td>
</table>
</div>
</body>
</html>
You can use textContent and not var keyword to read the x value. → document.getElementById('Test').textContent=x;
<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
<form id='user-input'>
<input type='text' id='given' placeholder='Given Information'></input>
</form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
<form id='user-input'>
<input type='text' id='prove' placeholder='Statement to Prove'></input>
</form>
<button id='Submit' Value='Edit' onClick="edit()">Submit</button>
<script>
function edit()
{
var x = document.getElementById('given').value;
var y = document.getElementById('prove').value;
document.getElementById('Test').textContent=x;
}
</script>
<br>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
<tr>
<th>Step Number</th>
<th>Step</th>
<th>Explaination</th>
</tr>
<tr>
<td>1</td>
<td id='Test'></td>
<td>Given</td>
</table>
</div>
</body>
</html>
! just add onChange="edit()" to first input and a little change in test function.
<input type='text' id='given' placeholder='Given Information' onChange="edit()"></input>
and
function edit(){
var x = document.getElementById('given').value;
var y = document.getElementById('prove').value;
document.getElementById('Test').innerHTML = x;}
var x is used to declare variables. And you don't need to edit innerHTML.value (I think this doesn't even exist). You just have to edit innerHTML
So, replace
document.getElementById('Test').innerHTML.value=var x
with
document.getElementById('Test').innerHTML = x
I'm not sure what you try to do but this will works better:
document.getElementById('Test').innerHTML = x;
So, if you want only to modify DOM and insert values I would suggest you to use:
insertRow() and insertCell() methods
This suggestion is based on this w3schools example,
and here is a specific jsfiddle for your case.
Definition and Usage
The insertRow() method creates an empty element and adds it to a table.
The insertRow() method inserts the new row(s) at the specified index in the table.
Note: A element must contain one or more or elements.
Tip: Use the deleteRow() method to remove a row.
For example a simple test would be:
function edit() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = document.getElementById("given").value;
cell2.innerHTML = document.getElementById("prove").value;
cell3.innerHTML = cell1.innerHTML + cell2.innerHTML
}
Hope this helps!