I have the following problem. I would like to add some data to a table using label values (in this case 7 & 5) but every time I try to add a value, the cells show the message "undefined". The main idea is to create a table which values are going to be used to draw a bar chart (graph) using the highcharts library
<h2>Add Row in JavaScript</h2>
<table id="table" cellspacing="0" border="1">
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tbody>
</table>
<button onclick="javascript:addRow('table')">Add row</button>
<br></br>
<label id="txt1" value="7" text="a">label 1</label>
<label id="txt2" value="5" text="b">label 2</label>
Script:
function addRow(id){
var label = ($("#txt1").val());
var label2 = ($("#txt2").val());
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label.value));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2.value));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
Example in JFiddle
Code
Highcharts library
Code
It seems you have taken label instead of textbox, anyway below is working code.
function addRow(id) {
var label = ($("#txt1").attr("value"));
var label2 = ($("#txt2").attr("value"));
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
Related
I would ask you for ideas of how to get a HTML's Tag ID from newly created buttons.
Though I successfully added a new column by a JS program to a Table, which was created by HTML, I could not do it to tables, which are generated by a JavaScript program.
So, I want you to help me to write JS codes to add a new column to newly JS-generated Tables.
Notes: now I can create a new Table by JS, but I could not add a new column to the table, mainly because I don't know how to get an ID from newly generated Tags.
Here are HTML and JavaScript codes:
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>
ProjectManagementSystem
</title>
<link rel="stylesheet" href="pms.css" type="text/css">
</head>
<body>
<h1>Manage Your Project</h1>
<input type="button" class="AddPrj" value="Add a Project" onclick="addPrj('PMS')">
<div id="PMS"></div>
<input class="prjName" type="text" placeholder="Project Name">
<table id="tbl" class="PMStbl" border="1">
<tr>
<th>
<input type="button" class="AddCln" value="Add a Column" onclick="insertColumn('tbl')">
</th>
<th>
<input type="date">
</th>
</tr>
<tr>
<td>PIC</td>
<td><input type="text" placeholder="Input Your Name"></td>
</tr>
<tr>
<td>Task</td>
<td>
<select>
<option value="dev">coding</option>
<option value="rev">review</option>
<option value="fix">fixed</option>
</select>
</td>
</tr>
</table>
<script src=pms.js></script>
</body>
</html>
JavaScript (I try to write a function "insertColumn2" below)
//Function to add a new column to a JS-generated Table
const insertColumn2=()=>{
//I want to carry out Functions below
}
//1-Function to add a new column to a Table, which is already created by HTML
const insertColumn=(tbl)=>{
// Add a column to a Table
let table = document.getElementById(tbl);
let cell_1 = table.rows[0].insertCell(1);
cell_1.innerHTML = '<input type="date">';
let cell_2 = table.rows[1].insertCell(1);
cell_2.innerHTML = '<input type="text" placeholder="Input your Name">';
let cell_3 = table.rows[2].insertCell(1);
cell_3.innerHTML = '<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
};
//2-Function to Create a new Table
const addPrj=(PMS)=>{
//Get tag's IDs from the Table
let $prjName = document.getElementsByClassName('prjName');
let prjName =$prjName.length;
let tableID = "tbl_"+String(prjName)
let newPrjID = "prj_"+String(prjName)
const newDiv = document.getElementById('PMS');
//Create a new "Project Name" button
let newPrj = document.createElement('input');
newPrj.setAttribute("type", "text");
newPrj.setAttribute("placeholder", "Project Name");
newPrj.setAttribute("class", "prjName");
newPrj.setAttribute("id",newPrjID);
//Generate a new Table
let table = document.createElement('table');
table.setAttribute("border", "1")
table.setAttribute("id",tableID);
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
//Insert a new button and a new table
newDiv.insertBefore(table, newDiv.firstChild);
newDiv.insertBefore(newPrj, newDiv.firstChild);
// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = '<input type="button" value="Add a Column" onclick="insertColumn2()">';
let heading_2 = document.createElement('th');
heading_2.innerHTML = '<input type="date">';
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
thead.appendChild(row_1);
// Create 2nd row data
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "PIC";
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = '<input type="text" placeholder="Input Your Name">';
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
tbody.appendChild(row_2);
// Create 3rd row data
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = "Task";
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML =
'<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
tbody.appendChild(row_3);
};
Thank you so much in advance for your kind support.
Don't work with id. Instead of passing an id as argument to insertColumn, pass the table element itself. You can find out which table is the current one, by walking up the DOM tree from the this node:
onclick="insertColumn(this.closest(table))"
Repeat this in all your HTML tables.
Then in insertColumn adapt and remove the assignment to table, as table will now be the parameter name:
const insertColumn = (table) => { // Notice change of parameter name
// Removed the assignment to table variable here
let cell_1 = table.rows[0].insertCell(1);
// ...etc
}
To dear trincot, I would ask you more details as programs still did not work.
I changed the HTML and JS codes below, referring to your advice:
Thanks in advance so much for your supports.
HTML
<input type="button" class="AddCln" value="Add a Column" onclick="insertColumn(table)">
JavaScript
const insertColumn=(table)=>{
// Add a column to a Table
let tbl = document.getElementById(this.closest(table));
let cell_1 = tbl.rows[0].insertCell(1);
cell_1.innerHTML = '<input type="date">';
};
And
const addPrj=(PMS)=>{
//Get tag's IDs from the Table
let $prjName = document.getElementsByClassName('prjName');
let prjName =$prjName.length;
let tableID = "tbl_"+String(prjName);
let newPrjID = "prj_"+String(prjName);
const newDiv = document.getElementById('PMS');
//Create a new "Project Name" button
let newPrj = document.createElement('input');
newPrj.setAttribute("type", "text");
newPrj.setAttribute("placeholder", "Project Name");
newPrj.setAttribute("class", "prjName");
newPrj.setAttribute("id",newPrjID);
//Generate a new Table
let table = document.createElement('table');
table.setAttribute("border", "1");
table.setAttribute("id",tableID);
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
//Insert a new button and a new table
newDiv.insertBefore(table, newDiv.firstChild);
newDiv.insertBefore(newPrj, newDiv.firstChild);
// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = '<input type="button" value="Add a Column" onclick="insertColumn(this.closest(table))">'};
Thanks to your kind supports, I would be almost there to complete my HTML and JavaScript codes. I would appreciate you if you could give me any information or advice.
Here are current HTML and JavaScript below. Now, the JS function insertColumn() does not work well. I would be very glad if you kindly could give me any solution?
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>
ProjectManagementSystem
</title>
<link rel="stylesheet" href="pms.css" type="text/css">
</head>
<body>
<h1>Manage Your Project</h1>
<input type="button" class="AddPrj" value="Add a Project" onclick="addPrj('PMS')">
<div id="PMS"></div>
<input class="prjName" type="text" placeholder="Project Name">
<table id="tbl" class="PMStbl" border="1">
<tr>
<th>
<input type="button" class="AddCln" value="Add a Column" onclick="insertColumn(`${tableID}`)">
</th>
<th>
<input type="date">
</th>
</tr>
<tr>
<td>PIC</td>
<td><input type="text" placeholder="Input Your Name"></td>
</tr>
<tr>
<td>Task</td>
<td>
<select>
<option value="dev">coding</option>
<option value="rev">review</option>
<option value="fix">fixed</option>
</select>
</td>
</tr>
</table>
<script src=pms.js></script>
</body>
</html>
JavaScript
//1-Function to add a new column to a Table, which is already created by HTML
const insertColumn=()=>{
// Add a column to a Table
let tbl = document.getElementById(`${tableID}`);
let cell_1 = tbl.rows[0].insertCell(1);
cell_1.innerHTML = '<input type="date">';
let cell_2 = tbl.rows[1].insertCell(1);
cell_2.innerHTML = '<input type="text" placeholder="Input your Name">';
let cell_3 = tbl.rows[2].insertCell(1);
cell_3.innerHTML =
'<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
};
//2-Function to Create a new Table
const addPrj=(PMS)=>{
//Get tag's IDs from the Table
let $prjName = document.getElementsByClassName('prjName');
let prjName =$prjName.length;
let tableID = "tbl_"+String(prjName);
let newPrjID = "prj_"+String(prjName);
const newDiv = document.getElementById('PMS');
//Create a new "Project Name" button
let newPrj = document.createElement('input');
newPrj.setAttribute("type", "text");
newPrj.setAttribute("placeholder", "Project Name");
newPrj.setAttribute("class", "prjName");
newPrj.setAttribute("id",newPrjID);
//Generate a new Table
let table = document.createElement('table');
table.setAttribute("border", "1");
table.setAttribute("id",tableID);
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
//Insert a new button and a new table
newDiv.insertBefore(table, newDiv.firstChild);
newDiv.insertBefore(newPrj, newDiv.firstChild);
// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = '<input type="button" value="Add a Column" onclick="insertColumn(`${tableID}`)">';
let heading_2 = document.createElement('th');
heading_2.innerHTML = '<input type="date">';
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
thead.appendChild(row_1);
// Create 2nd row data
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "PIC";
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = '<input type="text" placeholder="Input Your Name">';
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
tbody.appendChild(row_2);
// Create 3rd row data
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = "Task";
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML =
'<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>';
row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
tbody.appendChild(row_3);
};
I could manage to write my codes of HTML and JS.
HTML
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<title>
ProjectManagementSystem
</title>
<link rel="stylesheet" href="pms.css" type="text/css">
</head>
<body>
<h1>Manage Your Project</h1>
<input type="button" class="AddPrj" value="Add a Project" onclick="addPrj('PMS')">
<div id="PMS"></div>
<input class="prjName" type="text" placeholder="Project Name">
<table id="tbl" class="PMStbl" border="1">
<tr>
<th>
<input type="button" class="AddCln" value="Add a Column" onclick="insertColumn(tableID)">
</th>
<th>
<input type="date">
</th>
</tr>
<tr>
<td>PIC</td>
<td><input type="text" placeholder="Input Your Name"></td>
</tr>
<tr>
<td>Task</td>
<td>
<select>
<option value="dev">coding</option>
<option value="rev">review</option>
<option value="fix">fixed</option>
</select>
</td>
</tr>
</table>
<script src=pms.js></script>
</body>
</html>
JS
//1-Function to add a new column to a Table, which is already created by HTML
const insertColumn=(tableID)=>{
// Add a column to a Table
let tbl = document.getElementById(`${tableID}`);
let cell_1 = tbl.rows[0].insertCell(1);
cell_1.innerHTML = `<input type="date">`;
let cell_2 = tbl.rows[1].insertCell(1);
cell_2.innerHTML = `<input type="text" placeholder="Input your Name">`;
let cell_3 = tbl.rows[2].insertCell(1);
cell_3.innerHTML =
`<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>`;
};
//2-Function to Create a new Table
const addPrj=(PMS)=>{
//Get tag`s IDs from the Table
let $prjName = document.getElementsByClassName(`prjName`);
let prjName =$prjName.length;
let tableID = "tbl_"+String(prjName);
let newPrjID = "prj_"+String(prjName);
const newDiv = document.getElementById(`PMS`);
//Create a new "Project Name" button
let newPrj = document.createElement(`input`);
newPrj.setAttribute("type", "text");
newPrj.setAttribute("placeholder", "Project Name");
newPrj.setAttribute("class", "prjName");
newPrj.setAttribute("id",newPrjID);
//Generate a new Table
let table = document.createElement(`table`);
table.setAttribute("border", "1");
table.setAttribute("id",tableID);
let thead = document.createElement(`thead`);
let tbody = document.createElement(`tbody`);
table.appendChild(thead);
table.appendChild(tbody);
//Insert a new button and a new table
newDiv.insertBefore(table, newDiv.firstChild);
newDiv.insertBefore(newPrj, newDiv.firstChild);
// Creating and adding data to first row of the table
let row_1 = document.createElement(`tr`);
let heading_1 = document.createElement(`th`);
heading_1.innerHTML = `<input type="button" value="Add a Column" onclick="insertColumn('${tableID}')">`;
let heading_2 = document.createElement(`th`);
heading_2.innerHTML = `<input type="date">`;
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
thead.appendChild(row_1);
// Create 2nd row data
let row_2 = document.createElement(`tr`);
let row_2_data_1 = document.createElement(`td`);
row_2_data_1.innerHTML = `PIC`;
let row_2_data_2 = document.createElement(`td`);
row_2_data_2.innerHTML = `<input type="text" placeholder="Input Your Name">`;
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
tbody.appendChild(row_2);
// Create 3rd row data
let row_3 = document.createElement(`tr`);
let row_3_data_1 = document.createElement(`td`);
row_3_data_1.innerHTML = `Task`;
let row_3_data_2 = document.createElement(`td`);
row_3_data_2.innerHTML =
`<select><option value="dev">coding</option><option value="rev">review</option><option value="fix">fixed</option></select>`;
row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
tbody.appendChild(row_3);
};
Notes: HTML's button "Add a Column", which is initially shown in the browser, does not work instead of JS-generated buttons. I would appreciate it if you could kindly give me a comment as to this error (with the picture attached below)
I have two input fields, date and miles.
The HTML table has those columns. How do I grab the input values and on "submit" button, insert that data into a new row in the table?
var mileSubmit = document.getElementById("add-mileage");
mileSubmit.addEventListener("click", function () {
const date = document.getElementById("date_miles").value;
const mileage = document.getElementById("miles").value;
console.log(date, mileage);
document
.getElementById("mile_book")
.appendChild(document.createElement("tr"));
});
<form class="miles_form">
<label for="date">Date:</label>
<input type="date" id="date_miles" name="date_miles">
<label>Enter Current Mileage:</label>
<input name="mileage" type="number" id="miles">
</form>
<table id="mile_book">
<tr>
<th>Date</th>
<th>Mileage</th>
</tr>
</table>
Create td elements and append them to the tr element that you created.
var mileSubmit = document.getElementById("add-mileage");
mileSubmit.addEventListener("click", function() {
const date = document.getElementById("date_miles").value;
const mileage = document.getElementById("miles").value;
const row = document.createElement("tr");
const td1 = document.createElement("td");
td1.innerText = date;
row.appendChild(td1);
const td2 = document.createElement("td");
td2.innerText = mileage;
row.appendChild(td2);
document
.getElementById("mile_book")
.appendChild(row);
});
<form class="miles_form">
<label for="date">Date:</label>
<input type="date" id="date_miles" name="date_miles">
<br>
<label>Enter Current Mileage:</label>
<input name="mileage" type="number" id="miles"><br>
<button type="button" id="add-mileage">Add</button>
</form>
<table id="mile_book">
<tr>
<th>Date</th>
<th>Mileage</th>
</tr>
</table>
Good day,
I am stuck at this stage and I don't have enough experience with JavaScript, in the below HTML there’s select box include 2 option for phones (phone1 & phone2) and table and button called “Add”
The JavaScript code below have a function called addrow()
At this moment I need to get the option I choose from the select box to the table by pressing the button “Add”
e.g. if I choose phone1 that’s mean it supposed to show in the table phone1 + price.
and after that if I change my mind and decide to choose phone2 that’s mean will hide phone1+price and show phone2+price
and there’s “service charge” cost ($10 for both phones) it’s supposed to show under phone1 and phone2
e.g. if I choose phone1 that’s mean showing in the table
phone1 = first cell + price = second cell and under phone1 cell service charge = third cell and under price cell service charge cost = fourth cell
And the same thing if I choose phone2
phone2 = first cell + price = second cell and under phone2 cell service charge = third cell and under price cell service charge cost = fourth cell
Thanks in advance for the help.
function addRow() {
var table = document.getElementById("table");
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerHTML = document.getElementById("phone1").value;
td2.innerHTML = document.getElementById("txt3").value = '$275';
td3.innerHTML = document.getElementById("phone2").value;
td4.innerHTML = document.getElementById("txt4").value = '$100';
row.appendChild(td1);`enter code here`
row.appendChild(td2);
table.children[0].appendChild(row);
}
<select id="itemType" name="itemType">
<option id="phone1" value="phone1">phone1</option>
<option id="phone2" value="phone2">phone2</option>
</select>
<div id="txt3"></div>
<div id="txt4"></div>
<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />
<table id="table" border="1">
<tr>
<th>Item</th>
<th>Cost</th>
</tr>
</table>
<select id="itemType" name="itemType">
<option id="phone1" value="phone1">phone1</option>
<option id="phone2" value="phone2">phone2</option>
</select>
<input type="button" value="Add" onclick="addRow()" id="add"><br /><br />
<table id="table" border="1">
<tr>
<th>Item</th>
<th>Cost</th>
<th>Service Charge</th>
<th>Total</th>
</tr>
<tr id="ItemDetail"></tr>
</table>
<script type="text/javascript">
function addRow() {
let select = document.getElementById("itemType")
let price = 0
let serviceCharge = 10
if(select.value == "phone1"){
price = 275
}
else if(select.value == "phone2") {
price = 100
}
let data = `<td>${select.value}</td>
<td>$${price}</td>
<td>$${serviceCharge}</td>
<td>$${price + serviceCharge}</td>`
document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
}
</script>
The following HTML file contains an add button. When clicked, it should add a row. When I inspect the code, I find the rows added under the thead not the tbody tag. Why is that? how to avoid this?
addButton = document.getElementById("add-button");
table = document.getElementById("data-table");
addButton.addEventListener('click', add, false);
function add() {
var tableLength = table.length;
var row = table.insertRow(tableLength);
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
col1.innerHTML = "col1";
col2.innerHTML = "col2";
}
var delLink = document.getElementById("delete-link");
delLink.addEventListener('click', del, false);
function del() {
var rowstoDelete = table.querySelectorAll("tbody tr");
[].slice.call(rowstoDelete).forEach(function(row) {
row.remove()
});
}
<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
<thead>
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Action</th>
</tr>
<tr id="initial-row" class="initial-row">
<th><input type="text" id="text-field"></th>
<th><input type="button" class="add-button" id="add-button" value="Add"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a id="delete-link" href="#"> Delete all rows Except the first two</a>
check my fiddle here
enter link description here
What you didnt did is to see specifically for tbody. Answered here How to insert row in HTML table body in javascript?
addButton=document.getElementById("add-button");
table=document.getElementById("data-table");
addButton.addEventListener('click',add,false);
function add()
{
var tableLength=table.length;
var row = table.getElementsByTagName('tbody')[0].insertRow(tableLength);
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
col1.innerHTML="col1";
col2.innerHTML="col2";
}
var delLink = document.getElementById("delete-link");
delLink.addEventListener('click',del,false);
function del()
{
var rowstoDelete = table.querySelectorAll("tbody tr");
[].slice.call(rowstoDelete).forEach(function(row) {
row.remove()
});
}
I am trying to make a system where I can create new rows and delete them too, I would like to have a counter that counts the row number of each individual row.
Under "Num" I would like to have the row numbers displayed, but I can't figure out how to do so.
EDIT
I found a jQuery snippet that seems to count my first row, but not the newly created ones.
Updated Fiddle with jQuery snippet
Updated JS code with snippet in the top
See my fiddle here: https://jsfiddle.net/pr05dw6p/14/
HTML code:
<div class="row">
<div class="large-8 large-offset-2 columns">
<h2>This is the table</h2>
<form method="post">
<table id="myTable" class="hover large-12 columns">
<thead>
<tr>
<th>Num.</th>
<th>Name</th>
<th>Height</th>
<th>Width</th>
</tr>
</thead>
<tbody id="bannerTable">
<tr>
<td><p></p></td>
<td><input type="text" name="name"></td>
<td><input type="number" name="height"></td>
<td><input type="number" name="width"></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="row">
<div class="large-4 large-offset-2 columns">
<button class="button expanded" onclick="newRow()">Add new row</button>
</div>
<div class=" large-4 columns">
<button class="alert button expanded" onclick="deleteRow()">Delete latest row</button>
</div>
</div>
JS code:
//CREATE NEW BANNER - TABLE ROW COUNTER
$('#bannerTable tr').each(function(idx){
$(this).children().first().html(idx + 1);
});
//CREATE NEW BANNER - CREATE ROW
function newRow() {
var table = document.getElementById("bannerTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var element1 = document.createElement('p');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement('input');
element2.type="text", name="name";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('input');
element3.type="number", name="height";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement('input');
element4.type="number", name="width";
cell4.appendChild(element4);
}
//CREATE NEW BANNER - DELETE ROW
function deleteRow(){
var table = document.getElementById("bannerTable");
var rowCount = table.rows.length;
if(rowCount>1){
table.deleteRow(-1);
}
}
To count the rows you can use:
var row_count = $('#bannerTable tr').length;
you can call it at the end of newRow() and deleteRow() an append the result e.g. to a div.
You can get the length(count) of table rows as stated in other answers by using
table.getElementsByTagName("tr").length
This will get the count, and you can put it into the html of your generated p tag by calling element1.innerHTML = table.getElementsByTagName("tr").length
I would also suggest running your newRow() function on page initialization without a preset tr. The count of the rows will also help when you insert a row so that it always inserts a row AFTER the previously inserted row, keeps the Num. column nice and clean too.
Check out this updated fiddle: https://jsfiddle.net/pr05dw6p/19/
We need to do following changes :
Add 1 as default value in HTML in the P tag
In Javascript code we need count TR of table and put its value in table.insertRow(row_count); after that we need to increment value and add it to new <P> tag.
<tbody id="bannerTable">
<tr>
<td><p>1</p></td>
<td><input type="text" name="name"></td>
<td><input type="number" name="height"></td>
<td><input type="number" name="width"></td>
</tr>
</tbody>
Javascript Code
//CREATE NEW BANNER - CREATE ROW
function newRow() {
var table = document.getElementById("bannerTable");
var row_count = document.getElementById("bannerTable").rows.length;
var row = table.insertRow(row_count);
row_count = row_count+1;
var cell1 = row.insertCell(0);
var element1 = document.createElement('p');
element1.innerHTML = row_count;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement('input');
element2.type="text", name="name";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement('input');
element3.type="number", name="height";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement('input');
element4.type="number", name="width";
cell4.appendChild(element4);
}
var row_count = $('#myTable tbody tr').length.length;
call this after the add and delete row function