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>
Related
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 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'm trying to find a way to insert a row in a table based on a value that the user inputs and if that value exists in the table. For example, the table will have 10 rows. The user would like to add a row beneath row number 8. Please see screenshot.
<form>
<table class="myTable" id="myTable">
<tr>
<th class="myTable th">PALLET #</th>
<th class="myTable th">CASE COUNT</th>
<th class="myTable th">HILLTOP LOT #</th>
<th class="myTable th">SSCC (LAST 4)</th>
</tr>
<?php
for ($x=1 ; $x <=2 4; $x++) {
echo
'<tr>
<td style="font-size: 160%" id="pallet">' .$x. '</td>
<td id="caseCount"><input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/></td>
<td id="hilltopLot"><input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/></td>
<td id="sscc"><input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/></td>
</tr>';
}
?>
</table>
After clicking on the "Add Line" button and typing 8, it will look for row number 8 and insert a row beneath it also naming it row 8.
<br />
<br />
<p class="center">
<input type="submit" value="Submit" name="submit" class="blueButt_Big" />  
<input class="blueButt_Big" type="button" value="Cancel" onclick="parent.location='view_prodLine.php'" />  
<input class="blueButt_Big" type="button" value="Add Line" onclick="addLine()" />  
<input class="blueButt_Big" type="button" value="Delete Line" onclick="myDeleteFunction()" />
</form>
<script>
function addLine() {
var person = prompt("Please enter the pallet number");
if (person != null) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = person;
cell2.innerHTML = '<input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/>';
cell3.innerHTML = '<input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/>';
cell4.innerHTML = '<input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/>';
I've only been able to add a row to the very bottom of the table after prompting the user for input. I know I can specify where the row is inserted using the code I commented out. The obvious problem is that the position where it will insert the new row will change if the user adds more than one line. I fear I may be overthinking it, any thoughts?
//var x = document.getElementById("myTable").rows[22].cells;
//x[0].innerHTML = person;
}
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);
}
</script>
You can do it this way:
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<input type="number" id="RowNumber"/>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var RowNumber = document.getElementById("RowNumber").value;
var table = document.getElementById("myTable");
var row = table.insertRow(RowNumber);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
See it working here:
https://jsfiddle.net/p01r7sjb/1/
How I can insert all data from a generated HTML table into my database using PHP?
I have tried with a foreach loop, but it gives me an error all the time.
I have this code in JavaScript to adding a new row using a button:
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'to' + i;
el.id = 'to' + i;
el.size = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'cost' + i;
el2.id = 'cost' + i;
el2.size = 40;
secondCell.appendChild(el2);
frm.h.value=i;
i++;
}
And this is my HTML code:
<table id="table1" width="40%" border="2" cellpadding="0" cellspacing="0">
<tr>
<td><strong>To Address</strong></td>
<td><strong>Delivery Cost</strong></td>
</tr>
<tr>
<td><input name="to" type="text" id="to" size="40"/></td>
<td><input name="cost" type="text" id="cost" size="40"/></td>
</tr>
</table>
<br/><br/>
<input style="float: right;background-color: #57a000;height: 30px;font-weight: bold; font-family: cursive;margin-left: 10px;"
type="submit" value="Save All" name="SaveCost"/>
<input style="float: right;background-color: #57a000;height: 30px;font-weight: bold; font-family: cursive;"
type="button" value="Add New Place" onclick="addRow();"/>
<input name="h" type="hidden" id="h" value="0"/>
Finally I want to write some PHP to insert all the data from the generated HTML table into my database.
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>