It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I am trying to learn javascript but so far i came to a complete stop. I've made a html webpage with a form on it (3 fields : Name ,Surname, Gender) and table below . i'm trying to list the data the user is typing in that form and display it below in the table using javascript (appendChild)
How could i do this easily? Examples are highly appreciated.
<HTML>
<HEAD>
<TITLE>Test1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript">
function addRow(){
...
</script>
</HEAD>
<BODY>
<form>
Name:<br>
<input type="text" id="name"><br>
Last Name: <br>
<input type="text" id="lname"><br>
Gender: <br>
<input type="text" id ="gender"> <br>
<input type="submit" id ="submit" value="Submit" onclick="addRow()">
</form>
<table border="1">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>test, test</td>
<td>test, test</td>
</tr>
<tr>
<td>test2, test1</td>
<td>test2, test1</td>
</tr>
</table>
</BODY>
</HTML>
Step 1:
Give your table an identifier:
<table border="1" id="results">
Step 2:
Get a DOM reference to this table:
var table = document.getElementById('results');
Step3:
Make the elements you will insert:
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
Step4:
Set their values:
td1.innerHTML = document.getElementById('name').value;
td2.innerHTML = document.getElementById('lname').value;
td3.innerHTML = document.getElementById('gender').value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
Step5:
Insert into DOM:
table.children[0].appendChild(row);
Combined, we have:
function addRow(){
var table = document.getElementById('results');
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
td1.innerHTML = document.getElementById('name').value;
td2.innerHTML = document.getElementById('lname').value;
td3.innerHTML = document.getElementById('gender').value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
}
If you want to prepend a row, you can use something like this:
table.children[0].insertBefore(row,table.children[0].childNodes[1]);
instead of using appendChild to append the row. The rest is the same. See this example.
Here is my attempt:
fiddle
JavaScript:
(function setup() {
"use strict";
var fNameElem = document.getElementById("fName");
var lNameElem = document.getElementById("lName");
var genderElem = document.getElementById("gender");
var ageElem = document.getElementById("age");
var tableElem = document.getElementById("table");
document.getElementById("display").addEventListener("click", function () {
var newRow = tableElem.insertRow(-1);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(lNameElem.value + ", " + fNameElem.value);
newCell.appendChild(newText);
newCell = newRow.insertCell(1);
newText = document.createTextNode(genderElem.value);
newCell.appendChild(newText);
newCell = newRow.insertCell(2);
newText = document.createTextNode(ageElem.value);
newCell.appendChild(newText);
fNameElem.value = "";
lNameElem.value = "";
ageElem.value = "";
tableElem.value = "";
});
})();
HTML:
First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br>
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id ="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>
Related
I'm making a dynamic HTML table using JavaScript, to which you can add first and last names. But when I click on the submit button, it creates empty cells without an input field value.
HTML
<input type="text" id="name" placeholder="First Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" id ="submit" value="Submit" >
<table border="1" id="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</table>
JavaScript
let name = document.getElementById("name").value;
let lastname = document.getElementById("lastname").value;
let submit = document.getElementById("submit");
let table = document.getElementById("table");
var rowNum = 1;
submit.addEventListener("click" , function(){
var row = table.insertRow(rowNum);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = name;
cell1.innerHTML = lastname;
rowNum++;
});
You need to get the inputs value after submit, not in the initial load of the script, as the values will be just empty string on script's initial load.
You just need to add name and lastname variables inside the scope of the click event listener.
let submit = document.getElementById("submit");
let table = document.getElementById("table");
var rowNum = 1;
submit.addEventListener("click" , function(){
let name = document.getElementById("name").value;
let lastname = document.getElementById("lastname").value;
var row = table.insertRow(rowNum);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = name;
cell1.innerHTML = lastname;
rowNum++;
});
<input type="text" id="name" placeholder="First Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" id ="submit" value="Submit" >
<table border="1" id="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</table>
just looking for a simple solution on solving this, Consider the the following code:
<!DOCTYPE html>
<html>
<head>
<title>Javascript - Add HTML Table Row </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form>
<script>
function addRow()
{
// get input values
var name = document.getElementById('name').value;
var currentAge =
document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var Delete = document.getElementById('Delete').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length/2+1);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.innerHTML = name;
cel2.innerHTML = currentAge;
cel3.innerHTML = Birthday;
cel4.innerHTML = carType;
cel5.innerHTML = Delete;
function myFunction(){
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + " tr
elements in the table.";
}
</script>
</form>
</head>
<style>
table, th {
border: 1px solid black;
}
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #F4BC01;
color: #ABC412;
}
$("")
</style>
<body>
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id ="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/>
Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Delete Entry
<button id="Delete" onclick="remove_update(event)">delete</button> //this button right here but in each row and not here. should remove said row
</th>
</tr>
</table>
</body>
</html>
What im trying to do is within cel 5 (delete entry) is to add a delete button to each row that is entered into the table that will remove that row but don't know how to go about this. Ideally would like to do this without the use of JQuery if possible, since i've not touched upon it as of yet.
You can use the rowIndex property to delete the row.
function addRow() {
// get input values
var name = document.getElementById('name').value;
var currentAge = document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var table = document.getElementsByTagName('table')[0];
const index = table.rows.length;
var newRow = table.insertRow(index);
newRow.setAttribute('data-index', index);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.textContent = name;
cel2.textContent = currentAge;
cel3.textContent = Birthday;
cel4.textContent = carType;
cel5.innerHTML = '<button onclick="removeRow(this)" type="button" class="delete-button">Delete</button>';
}
function myFunction() {
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}
function removeRow(evt) {
const deleteIndex = evt.parentElement.parentElement.rowIndex;
document.getElementById("table").deleteRow(deleteIndex);
}
table,
th {
border: 1px solid black;
}
tbody td {
padding: 30px;
}
tbody tr:nth-child(odd) {
background-color: #F4BC01;
color: #ABC412;
}
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id ="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/>
Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Delete</th>
</tr>
</table>
</body>
</html>
What you should be doing is that you set the innerHTML of cel5 to a button, e.g.:
cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';
Then, you can simply add a click event listener on the table, and check if a click event has emitted from the button element. If it matches, you then delete the closest <tr> element:
document.getElementById('table').addEventListener('click', function(e) {
// Check if click event came from delete button
if (!e.target.classList.contains('delete-button'))
return;
e.target.closest('tr').remove();
});
See proof-of-concept example below:
function addRow() {
// get input values
var name = document.getElementById('name').value;
var currentAge = document.getElementById('currentAge').value;
var Birthday = document.getElementById('Birthday').value;
var carType = document.getElementById('carType').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length / 2 + 1);
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var cel3 = newRow.insertCell(2);
var cel4 = newRow.insertCell(3);
var cel5 = newRow.insertCell(4);
cel1.innerHTML = name;
cel2.innerHTML = currentAge;
cel3.innerHTML = Birthday;
cel4.innerHTML = carType;
cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';
}
function myFunction() {
var x = document.getElementById("table").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}
document.getElementById('table').addEventListener('click', function(e) {
// Check if click event came from delete button
if (!e.target.classList.contains('delete-button'))
return;
e.target.closest('tr').remove();
});
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for
elements amount</button>
<p id="demo"></p>
Name: <input type="text" name="name" id="name" /><br/><br/> Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/> Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>
<button onclick="addRow();">Display</button><br/><br/>
<p>Eye Colour:</p>
<select id="carType">
<option value="ferrari" id="ferrari">Ferrari</option>
<option value="lamborghini" id="lamborghini">Lamborghini</option>
<option value="porsche" id="porsche">Porsche</option>
<option value="bugatti" id="bugatti">Bugatti</option>
<option value="pagani" id="pagani">Pagani</option>
</select>
<table border="1" id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthday</th>
<th>CarType</th>
<th>Actions</th>
</tr>
</table>
In the head, add a function that understands rows and cells. Call some delete on a parent of a cell (Delete the <tr> in which the <td> is located at). then on the body add to each dynamic button an onClick event and set that function you created earlier ON.
You can use a script like this:
function deleteRow() {
var tableData = event.target.parentNode;
var tableRow = tableData.parentNode;
tableRow.parentNode.removeChild(tableRow);
}
In the button you create (dynamically or fixedly) you should add an onClick event. For example:
<tr>
<td>John Doe</td>
<td>$10,000</td>
<td><input type="submit" value="Delete" id="Delete" onclick="deleteRow()"></td>
</tr>
I want to use a javascript in my jsp page in order to insert value of the input box into a table row.
My Jsp Page:-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript">
function addData(){
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
</script>
</head>
<body>
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
</body>
</html>
Here i wanted to insert a row into a table from the input box. But the value is not being inserted.
Is there any problem in the code.
use the console developer tools of your browser, to see errors,
here is the error :
Uncaught TypeError: document.getElementByTagName is not a function
at addData (a.html:11)
at HTMLButtonElement.onclick (a.html:28)
which means javascript doesn't recognise this function , so you have to look , the right notation of the function which is
getElementsByTagName
Please correct the spelling getElementByTagName to getElementsByTagName
Typo
Try like this, TagName is the multiple selector.you are missing s
var table = document.getElementsByTagName('table')[0];
instead of
var table = document.getElementByTagName('table')[0];
function addData() {
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementsByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
I want to add a new row to a table. Therefore I have tried it in two different ways. In my opinion both should work. But indeed the don't. The first approach does not work. But why?
First approach (not working...):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table</title>
<script type="text/javascript">
function addLine(nr, name, date) {
var neueZeile = document.createElement("tr");
var neuerEintrag1 = document.createElement("td");
var neuerText1 = document.createTextNode(nr);
var neuerEintrag2 = document.createElement("td");
var neuerText2 = document.createTextNode(name);
var neuerEintrag3 = document.createElement("td");
var neuerText3 = document.createTextNode(date);
neuerEintrag1.appendChild(neuerText1);
neuerEintrag2.appendChild(neuerText2);
neuerEintrag3.appendChild(neuerText3);
neueZeile.appendChild(neuerEintrag1);
neueZeile.appendChild(neuerEintrag2);
neueZeile.appendChild(neuerEintrag3);
var parentN = document.getElementById("myTable");
parentN.appendChild(neueZeile);
</script>
<link rel="stylesheet" type="text/css" href="Website.css" />
</head>
<body>
<table class="table" id="myTable">
<thead>
<td>Nr.</td>
<td>Name</td>
<td>Datum</td>
</thead>
<tr>
<td>1</td>
<td>Max</td>
<td>01.01.2001</td>
</tr>
</table>
<form name=addRow>
Nr.:
<input type=text name=btn1>
Name:
<input type=text name=btn2>
Date:
<input type=text name=btn3>
<input type=button name=btn4 value=ADD
onclick="addLine(btn1.value,btn2.value,btn3.value)">
</form>
<input type=button name=btn5 value=DeleteLastAddedRow onclick="deleteRow()">
<a class="back" href="Website.html">Zurück</a>
</body>
</html>
My approach is not working. Does somebody know why or can help me?
Second approach (works fine...):
function addLine(nr, name, date) {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = nr;
cell2.innerHTML = name;
cell3.innerHTML = date;
}
I am really interested in why the the first approach is not working.
Does somebody have an idea?
Kind regards
You missed to create tr element. Create tr and append it to table then all td to new tr.
Here is working code
function addLine(nr, name, date) {
var neuerEintrag1 = document.createElement("td");
var neuerText1 = document.createTextNode(nr);
var neuerEintrag2 = document.createElement("td");
var neuerText2 = document.createTextNode(name);
var neuerEintrag3 = document.createElement("td");
var neuerText3 = document.createTextNode(date);
neuerEintrag1.appendChild(neuerText1);
neuerEintrag2.appendChild(neuerText2);
neuerEintrag3.appendChild(neuerText3);
var parentN = document.getElementById("myTable");
var row = document.createElement("tr");
parentN.appendChild(row);
row.appendChild(neuerEintrag1);
row.appendChild(neuerEintrag2);
row.appendChild(neuerEintrag3);
}
<table class="table" id="myTable">
<thead>
<td>Nr.</td>
<td>Name</td>
<td>Datum</td>
</thead>
<tr>
<td>1</td>
<td>Max</td>
<td>01.01.2001</td>
</tr>
</table>
<form name=addRow>
Nr.:
<input type=text name=btn1> Name:
<input type=text name=btn2> Date:
<input type=text name=btn3>
<input type=button name=btn4 value=ADD onclick="addLine(btn1.value,btn2.value,btn3.value)">
</form>
I have added a row using javascript. Now I want the new columns's value to be picked from the input box text by id. There's some sort of error in it, which I'm unable to get.
<html>
<head>
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = getElementById("cid");
cell2.innerHTML = document.getElementById("name");
}
</script>
</head>
<body>
<table id="myTable" >
<tr>
<td>S. No</td>
<td>Item Name</td>
<td>Subtotal</td>
</tr>
<tr>
<td><input type="text" id="cid" name="id" /> </td>
<td><button onclick="addtosubtotal()" /></td>
</tr>
</table>
</body>
</html>
You don't have an id for the input name:
<input type="text" id="name" name="name" />
So you wont get it by id
You can also combine the two statements in your JavaScript if you want to
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0).innerHTML = document.getElementById("cid").value;
var cell2 = row.insertCell(1).innerHTML = document.getElementById("name").value;
}
</script>