I want to enter the values of "cell1" and "cell2" dynamically in the table instead of using the static values "one" and "two".
How to do it?
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(4);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
//cell2 = document.getElementById('cell2');
cell1.innerHTML = "One";
cell2.innerHTML = "two";
}
If you are just starting to learn JS, then may be what you are looking for is prompt
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(4);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
//cell2 = document.getElementById('cell2');
var one, two;
one = prompt("Please enter first value");
two = prompt("Please enter second value");
cell1.innerHTML = one;
cell2.innerHTML = two;
}
</script>
However, this is not how things are done in real solutions to real world problems.
Related
I am using the following code to add a new row dynamically to my HTML.
When I enter the details and hit submit, the new row shows up momentarily and disappears.
What am I doing wrong?
function addNewRow(){
var tab = document.getElementById("table"),
newRow = tab.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
date = document.getElementById("date-input").value,
time = document.getElementById("time-input").value,
amount = document.getElementById("amount-input").value,
source = document.getElementById("source-input").value,
destination = document.getElementById("dest-input").value;
cell1.innerHTML = date;
cell2.innerHTML = time;
cell3.innerHTML = amount;
cell4.innerHTML = source;
cell5.innerHTML = destination;
}
var btn = document.getElementById("button");
btn.addEventListener('click', function(){
addNewRow();
})
I have a problem I been suffering on for a couple hours now.
The context is, I need to make a button with action listener in JavaScript and add it into a table.
Here is the code I have
var _button = document.createElement("button");
_button.data = _a;
_button.innerHTML = 'click me';
_button.onclick = function()
{
alert("hello, world");
}
var table = document.getElementById("tableOnline");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var _weakbutton = _button.outerHTML;
_weakbutton.onclick = function()
{
alert("hello, world");
}
cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.innerHTML = _weakbutton;
The code works if I add the create the button and add it onto the body (without weakButton), but how can I make it work into a table?
Kind regards,
Zhendos.
EDIT:
Because requested, here is the table we talk about.
<div class = "container">
<div class = "table">
<thead id = "thead">
<tr>
<th> firstname <th>
<th> lastname </th>
<th> organisation </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Instead of var _weakbutton = _button.outerHTML; create a copy of the button with var _weakbutton = _button.cloneNode(true);. This will create a new button, based on your original one.
Because this is now a button node, you can't add it with cell3.innerHTML = _weakbutton; but have to use cell3.appendChild( _weakbutton );
So, with your code it would be
var _button = document.createElement("button");
_button.data = "hi";
_button.innerHTML = 'click me';
_button.onclick = function()
{
alert("hello, world");
}
var table = document.getElementById("tableOnline");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var _weakbutton = _button.cloneNode(true)
_weakbutton.onclick = function()
{
alert("hello, world");
}
cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.appendChild( _weakbutton );
<table id="tableOnline"></table>
I already created the add rows but my problem is, the value of the id that I created doesn't increment. I just stick to 1 result.
I also want to include remove rows so whenever I click the button "remove" the row with specific id will remove.
Here's my jsfiddle
<script>
var rowID;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
Thanks in advance
This is because you set it back here
var cell4 = row.insertCell(3);
rowID=1; //<-- NOT NEED
cell1.innerHTML = "###";
remove this row.
Here is the jsFiddle. And init it with var rowID = 0;
You need to set your variable to 0 when defining it in order to add 1 to it with the ++ operator. Also remove the rowID = 1 (it resets it to 1) in your code as following:
<script>
var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
I think you had a couple of typos, see in the comments:
//rowId must be initialized to a number or you'll get Nan with rowId++
var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
//this is the reason of your bug
//rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
var rowID = 0;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
//rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id=''>Remove</button>";
}
Initialize the var rowID to 0 during declaration (considered good practice)
You made a silly mistake of assigning the rowid in the function itself.
jsFiddle: https://jsfiddle.net/z51z3jj1/2/
You are setting rowID=1 so every time it will have value 1. Also you need to set rowID=0 if you want to increment it otherwise if you don'y initialize it it will result in NaN
<script>
var rowID;
function myFunction() {
rowID++;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
rowID=1;
cell1.innerHTML = "###";
cell2.innerHTML = "###";
cell3.innerHTML = rowID;
cell4.innerHTML = "<button id="+rowID+" onclick='Remove(this)'>Remove</button>";
}
function Remove(btn){
btn.parentElement.parentElement.remove();
}
Here is jsfiddle
If you want remove elements, this is an option
row.setAttribute("onclick","remove(this)");
https://jsfiddle.net/z51z3jj1/4/
I'm sorry, I'm new to Javascript and this is one of the first websites that I have made. I was wondering why exactly my code isn't working properly.
Instead of a text box and a button showing up, in the cells where they are supposed to show up, [object HTMLInputElement] and [object HTMLButtonElement] show up.
function frenchBread(x){
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var rem = document.createElement("button");
var name = document.createTextNode("Remove");
rem.appendChild(name);
var num = document.createElement("input");
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);
x.disabled = true;
}
<button type = "button" class = "itemClick" onclick = "frenchBread(this);">French Bread</button>
<table id = "orderTable">
</table>
Just append your variables, no need to call innerHTML:
cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);
instead of:
cell1.innerHTML = "French Bread";
cell2.innerHTML = document.body.appendChild(num);
cell3.innerHTML = document.body.appendChild(rem);
FIDDLE
I added a little more HTML before making the adjustment to your code so that it can be run.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type = "button" class = "itemClick" onclick = "frenchBread(this);">French Bread</button>
<table id="orderTable"></table>
<script>
function frenchBread(x){
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var rem = document.createElement("button");
var name = document.createTextNode("Remove");
rem.appendChild(name);
var num = document.createElement("input");
cell1.innerHTML = "French Bread";
cell2.appendChild(num);
cell3.appendChild(rem);
x.disabled = true;
}
</script>
</body>
</html>
The reason that your code was failing was that the text "French Bread) that you assigned to cel1's innerHTML is valid HTML. innerHTML can only accept strings that are valid HTML. While it did not work for cel2 and cel3 because rem and num were DOM elements. therefore they can be assigned as children of the cel2 and cel3 (which are also DOM elements) by using the appendChild member functions of those two cell elements. Whe you tried to do that through the innerHTML JavaScript had to convert those DOM elements into text, and so the text that you saw resulted from the JS object being converted into strings.
I'm a total javascript noobie. I developed the code bellow following and modifing some random tutorial I found.
It should add and remove rows with input fields at a table, however, it does nothing. It also worth saying that I called the function as a link. I added 'javascript:addRow()' inside the tag and at the header. Did I missed something?
function addRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
var row = table.insertRow(rowCount);
var cel1=row.insertCell(0);
var element1= document.createElement("input");
var element1.type="text";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var element2.type="text";
cell1.appendChild(element2);
var cell2=row.insertCell(2);
var element3.type="text";
cell1.appendChild(element3);
rowCount++;
}
}
function removeRow(){
tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
table.deletRow(rowCount);
rowCount--;
}
}
You have several errors, but here is the basic working model. I think you should be able to sort it out from here
http://jsfiddle.net/dBzkX/
function addRow() {
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount<7){
//You declared var in front of the same variable twice. Don't do that.
//You were appending cells inside existing cell. Add them to row instead.
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement('input');
element1.type="text";
cell1.appendChild(element1);
row.insertCell(1);
row.insertCell(2);
}
}
function removeRow(){
var tableID="ticketCreate";
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount>1){
//you had type in deletRow. Also, you can pass in -1 to remove the last row
table.deleteRow(-1);
}
}
The error is here:
var element1= document.createElement("input");
var element1.type="text";
It should be
var element1= document.createElement("input");
element1.type="text";
and similar for the other elements.
You declare the variable with
var element1 = 'something';
and then access it with
element1 = 'something different';
Also there is a typo in
var cel1=row.insertCell(0);
It needs to be
var cell1=row.insertCell(0);
Additionally you did not define element 2 and 3,
used cell2 twice where it should be cell2 and cell3 and only appended to cell1.