how to create textbox/text field and button
JavaScript
<script type="text/javascript">
function addItemTodo(){
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
row = my_table.insertRow(rows);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell1.innerHTML = value;
cell2.innerHTML = value2;
}
</script>
HTML Code
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>
How to append the text box and button, when clicked the add button
You could create your new elements within your Javascript as strings, and then add them to two new cells (insertCell(2) and insertCell(3)) using .innerHTML like so:
function addItemTodo() {
var value = document.getElementById('item1').value;
var value2 = document.getElementById('item2').value;
var my_table = document.getElementById('todo');
var rows = my_table.getElementsByTagName("tr").length;
var row = my_table.insertRow(rows);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = value2;
row.insertCell(2).innerHTML = "<input type='text' placeholder='xxx' class='text-box' />";
row.insertCell(3).innerHTML = "<button>Text</button>";
}
.text-box {
width: 50px;
}
<input type="text" id="item1" placeholder="item1" size="12">
<input type="text" id="item2" placeholder="item2" size="14">
<button id="add" onclick="addItemTodo()">Add</button>
<table border="1" style="width:50%" id="todo">
<tr>
<th>Input from 'item1'</th>
<th>Input from 'item2'</th>
<th>Text Box</th>
<th>Button</th>
</tr>
</table>
Related
I am working with javascript
when I submit the form I store the data in a table but the table data is also clear
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/>
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord(data) {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
I am working with html with javascript
when I submit the form then not able to see the data in table I put debug and I can see the data is store in table but then tabale data is clear.
Here is my solution, you need to insert a row each time and then instead of doing a submit, just clear the form instead!
reference
function onFormSubmit() {
insertRow();
}
function insertRow() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var location = document.getElementById('location').value;
var table = document.getElementById("myTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
// Add some text to the new cells:
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = location;
resetform();
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='button' value='submit' onclick='onFormSubmit()' />
</form>
<br/> <br/>
<table id="myTable">
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
you just need to prevent form to refresh page
then you just need remove function that clear form Cell
index.html
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< -->
</form>
<br /> <br />
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody>
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
index.js
function onFormSubmit() {
document.getElementById('fname').value;
document.getElementById('lname').value;
document.getElementById('location').value;
readFormData();
}
function readFormData() {
var data = {};
data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;
insertnewrecord(data);
}
function insertnewrecord() {
document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;
// resetform(); <<<<<<<<<<<<<<<<<
}
function resetform() {
document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";
}
You should declare the data object globally inside the js script. Also, use event.preventDefault() inside custom button click function.
Also, I changed the insertnewrecord() function to handle multiple insert operations in the table.
Check following code:
var data = {};
function onFormSubmit(e) {
readFormData();
e.preventDefault();
}
function readFormData() {
data.fname = document.getElementById("fname").value;
data.lname = document.getElementById("lname").value;
data.location = document.getElementById("location").value;
insertnewrecord(data);
}
function insertnewrecord(data) {
var table = document.getElementById("show-data");
table.innerHTML += `<tr> <td>${data.fname}</td> <td>${data.lname}</td> <td>${data.location}</td> </tr>`;
resetform();
}
function resetform() {
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("location").value = "";
}
<body>
<form id='freg'>
<label>firstname</label>
<input type='text' id='fname'>
<label>lastname</label>
<input type='text' id='lname'>
<label>officelocation</label>
<input type='text' id='location'>
<input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' />
</form>
<br/> <br/>
<table>
<thead>
<tr>
<th>firstname</th>
<th>lastname</th>
<th>location</th>
</tr>
</thead>
<tbody id="show-data">
<td id='ffname'></td>
<td id='llname'></td>
<td id='olocation'></td>
</tbody>
</table>
<script type='text/javascript' src='index.js'></script>
use event.preventDefault(); in your onFormSubmit
function
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I have a problem adding rows to the table with this code and I can't solve it.
function add() {
document.getElementById("popup").style.display = "block";
document.getElementById("add").addEventListener("click", function() {
if (!checkEmptyInput()) {
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
product = document.getElementById("ins-product").value,
color = document.getElementById("ins-color").value,
price = document.getElementById("ins-price").value;
cell1.innerHTML = '<input type="checkbox" id="select">';
cell2.innerHTML = product;
cell3.innerHTML = color;
cell4.innerHTML = price;
cell5.innerHTML = '<input type="button" value="edit" id="edit">';
//selectedRowToInput();
}
document.getElementById("popup").style.display = "none";
});
clearinput();
}
function remove() {
var table = document.getElementById("table");
var index = 1;
while (index < table.rows.length) {
var input = table.rows[index].cells[0].children[0];
if (input && input.checked) {
table.deleteRow(index);
} else {
index++;
}
}
}
.popup {
display: none;
}
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th>Select</th>
<th>Product</th>
<th>Color</th>
<th>Price</th>
<th>Edit</th>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A1</td>
<td>B1</td>
<td>10</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<td>A3</td>
<td>B3</td>
<td>30</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
<tr>
<td><input type="checkbox" id="select" class="select"></td>
<td>A2</td>
<td>B2</td>
<td>20</td>
<td><input type="button" value="edit" id="edit"></td>
</tr>
</table>
</div>
<button onclick="add();">Add</button>
<button onclick="remove();">Remove</button>
<div class="popup" id="popup">
First Name :<input type="text" name="Product" id="ins-product"> Last Name :<input type="text" name="Color" id="ins-color"> Age :<input type="number" name="Price" id="ins-price">
<button id="add">Add</button>
<!--button onclick="edit();">Edit</button>-->
</div>
</div>
When I use add for the second time it adds two rows at once. And for the third time, it adds three rows of the same value. The number of rows inserting increases when I click on add repeatedly.
Your Code Got Some Undefined Functions and miss Placing functions Causing The issue.
The General Rule For Adding A New Row To the Table Is :
// Insert a row in the table at the last row
var newRow = tableRef.insertRow();
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
For Your Specific "code"
The Event Listener For The Button With id = "add"
document.getElementById("add").addEventListener("click",function(){
Must Be Outside the function add to be triggered probably
Another Error Will Appear As the function "checkEmptyInput()" is no defined
Simply define or remove it for your code to work.
Here's a working code for you:
<script>
document.getElementById("add").addEventListener("click",function(){
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
product = document.getElementById("ins-product").value,
color = document.getElementById("ins-color").value,
price = document.getElementById("ins-price").value;
cell1.innerHTML = '<input type="checkbox" id="select">';
cell2.innerHTML = product;
cell3.innerHTML = color;
cell4.innerHTML = price;
cell5.innerHTML = '<input type="button" value="edit" id="edit">';
//selectedRowToInput();
}
document.getElementById("popup").style.display = "none";
});
function add()
{
document.getElementById("popup").style.display = "block";
}
function remove () {
var table = document.getElementById("table");
var index = 1;
while (index < table.rows.length) {
var input = table.rows[index].cells[0].children[0];
if (input && input.checked) {
table.deleteRow(index);
}
else {
index++;
}
}
}
</script>
I am adding rows in table and deleting, this works fine. using oninput="" event i am also able to calculate the total cost by calling javascript function.
Now, the moment i add <form></form>, neither am able to add rows nor moving any forward. I am new to javascript, and have no clue what is going on. please help somebody.
<div class="container">
<p>Add and Delete Items with Total Cost Value</p>
<form>
<div id="tableDiv">
<table id="myTableHead">
<tr>
<th>Item Name</th>
<th>Item Cost</th>
</tr>
<tr>
<td><input type="text" name="ItemName[]" id="ItemName" /></td>
<td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
</tr>
</table>
<table id="myTable">
</table>
<table id="myTableTot">
<tr>
<td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
<td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
</tr>
</table>
</div>
<br>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
</form>
</div>
<script>
function myCreateFunction() {
var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
if (TotalCostValueCurrent <= 25000) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />';
} else {
window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
}
}
function myTotalFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var i = 0;
var itemCostSum = 0;
while (i <= arrLen && itemCostSum <= 25000) {
if (itemCostSum <= 25000) {
itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
i++;
document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
}
}
}
function myDeleteFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
var itemCostFinal = 0;
itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);
//FINAL OUTPUT
document.getElementById("myTable").deleteRow(-1); // Delete Last Row
document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
}
</script>
Inside the form tags buttons tend to do the default action which is submit.
So change your button from,
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
to
<input type="button" onclick="myCreateFunction()" value="Create row">
<input type="button" onclick="myDeleteFunction()" value ="Delete row">
You have to add Input tag instead of button tag. Because button tag in form specifies default submit event on-click so your form submitted when you add any row and also refresh.
<div class="container">
<p>Add and Delete Items with Total Cost Value</p>
<form>
<div id="tableDiv">
<table id="myTableHead">
<tr>
<th>Item Name</th>
<th>Item Cost</th>
</tr>
<tr>
<td><input type="text" name="ItemName[]" id="ItemName" /></td>
<td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
</tr>
</table>
<table id="myTable">
</table>
<table id="myTableTot">
<tr>
<td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
<td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
</tr>
</table>
</div>
<br>
<input type="button" onclick="myCreateFunction()" value="Create row" />
<input type="button" onclick="myDeleteFunction()" value="Delete row" />
</form>
</div>
<script>
function myCreateFunction() {
var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
if (TotalCostValueCurrent <= 25000) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />';
} else {
window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
}
}
function myTotalFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var i = 0;
var itemCostSum = 0;
while (i < arrLen && itemCostSum <= 25000) {
if (itemCostSum <= 25000) {
itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
i++;
document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
}
}
}
function myDeleteFunction() {
var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
var arrLen = arrItemCost.length;
var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
var itemCostFinal = 0;
itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);
//FINAL OUTPUT
document.getElementById("myTable").deleteRow(-1); // Delete Last Row
document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
}
</script>
I have a HTML form. The save and delete button are working fine. But I want to write JavaScript (not jQuery or AngularJS) code of edit and update button. When I click the edit the data of particular row should be displayed in the textboxes and when I press update button the updated data of that particular row should get submitted in the HTML table.
function addRow() {
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= id.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= email.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("id");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("email");
var table = document.getElementById("myTableData");
id.value="";
name.value="";
gender.value="";
address.value="";
email.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
}
Add Function will look like this..
function addRow() {
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var id = document.getElementById("id");
var name = document.getElementById("name");
var gender = document.getElementById("gender");
var address = document.getElementById("address");
var email = document.getElementById("email");
var cell1 = row.insertCell(0);
cell1.innerHTML=id.value;
var cell2 = row.insertCell(1);
cell2.innerHTML = name.value;
var cell3 = row.insertCell(2);
cell3.innerHTML = gender.value;
var cell4 = row.insertCell(3);
cell4.innerHTML = address.value;
var cell5 = row.insertCell(4);
cell5.innerHTML = email.value;
var cell6 = row.insertCell(5);
var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">";
cell6.innerHTML = strHtml5;
}
</script>
I copied your code and executed in my machine and found minor errors as well as big mistake you did by not using form tag and created the form.
After reverse engineering I appended your code and made it fully functional as well as simple to understand.
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> -->
</head>
<body>
<div id="myform">
<b>Employee Information</b>
<form method="post" action=""> <!-- ###Form tag is not used -->
<table>
<tr>
<td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity -->
<td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy -->
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Gender:</td> <!-- ### imstead of select option you must use radio button -->
<td> <input type="radio" id="gender" value="male" /> Male <br>
<input type="radio" id="gender" value="Female" /> FeMale
</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field-->
</tr>
<tr>
<td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email -->
<td><input type="email" id="mail" name="Email"></td>
</tr>
<!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]-->
<tr>
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td>
<td><input type="reset" value="Reset" /> </td>
<td><input type="button" id="update" value="Update" onClick=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Gender</b></td>
<td><b>Address</b></td>
<td><b>Email</b></td>
<td><b>Action</b></td>
</tr>
</table>
</div>
<!-- ============ JavaScript ========== -->
<script>
function addRow() {
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= empId.value;
row.insertCell(1).innerHTML= name.value;
row.insertCell(2).innerHTML= gender.value;
row.insertCell(3).innerHTML= address.value;
row.insertCell(4).innerHTML= mail.value;
row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">';
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function updateRow(obj){
}
function reset(){
var id= document.getElementById("empId");
var name= document.getElementById("name");
var gender= document.getElementById("gender");
var address= document.getElementById("address");
var email = document.getElementById("mail");
var table = document.getElementById("myTableData");
empId.value="";
name.value="";
gender.value="";
address.value="";
mail.value="";
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
</script>
</body>
</html>
I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page.
I tried changing the addRow() functions in the html and JS to have different names but this caused both tables to fail.
Any help would be appreciated. Here's the test code I've been using.
<!DOCTYPE html>
<body onload="load()">
<div id="myform">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" id="age">
<input type="button" id="add" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table>
<tr>
<td>Height:</td>
<td><input type="text" id="height"></td>
</tr>
<tr>
<td>Width:</td>
<td><input type="text" id="width">
<input type="button" id="addDim" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<table id="myTableData2" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Height</b></td>
<td><b>Width</b></td>
</tr>
</table>
</body>
</html>
function addRow() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
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="deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
var width = document.getElementById("width");
var height = document.getElementById("height");
var table2 = document.getElementById("myTableData2");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML = width.value;
row.insertCell(2).innerHTML = height.value;
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
function load() {
console.log("Page load finished");
}
Looks like in the bottom section, you're not using the row2 variable you've defined.
Should be:
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;
here how i did it. you can use the same function for any amount of table, if pass the parameter in the function.
http://jsfiddle.net/8t5aqomk/2/
function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var info = [firstName,lastName,age]
var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length;
for(var i=0; i<cellCount; i++) {
row.insertCell(i).innerHTML=info[i];
}
}