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
Related
I have been looking all around through numerous sources to try and find a way to add name="" to generated table rows. Here is the table part of the form being submitted.
<table id="quote_form_table"border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3">
<tr>
<td>Quantity</td>
<td>Item</td>
<td>Unit Price</td>
</tr>
<tr name="row[]">
<td><input type="text" name="quantity" ></td>
<td>
<select name="products">
<option>Roller banner</option>
<option>Grasshopper</option>
<option>Pop up display</option>
</select>
</td>
<td>
<select name="type">
<option>Roller banner</option>
<option>Grasshopper</option>
<option>Pop up display</option>
</select>
</td>
</tr>
</table>
<br>
<button type="button"onclick="addrow()">Add Row</button>
<button type="button"onclick="removerow()">Remove Row</button><br><br><br>
Here is the script adding and removing rows.
<script>
function addrow() {
var table = document.getElementById("quote_form_table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text" name="quantity" >';
cell2.innerHTML = '<select name="products"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
cell3.innerHTML = '<select name="type"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
}
function removerow() {
document.getElementById("quote_form_table").deleteRow(-1);
}
</script>
As a novice at Javascript ,(and I use the term 'novice' very loosely as it is not a language I am familiar with to fix this myself), I tried setAttribute to no avail.
var tr = tr.setAttribute("name", "row[]", 0);
I found many sources on how to add classes or Id's but none for 'name'. So as a wild stab in the dark I tried a last attempt to see if I could work it out.
row.name = "row[]";
So now here I am.
The table rows are being made into arrays for PHP to process so that the information can be sent off in an email for price quotes and I can generate the information on the other end in the right order.
My question is How do you add a name="row[]" to the dynamically generated tr tag?
Is it even possible?
You want to add name to new rows, right?
var numRow = 0;
function addrow() {
var table = document.getElementById("quote_form_table");
var row = table.insertRow(-1);
row.setAttribute("name", "row"+numRow);
numRow++;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text" name="quantity" >';
cell2.innerHTML = '<select name="products"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
cell3.innerHTML = '<select name="type"><option>Roller banner</option><option>GrassHopper</option><option>Pop up display</option></select>';
}
function removerow() {
document.getElementById("quote_form_table").deleteRow(-1);
numRow--;
}
But i think that you should use id or class instead of name for <tr> elements
Below is a code i wrote to do the following things
each table row contains a '+' button
when click on the button the code should find the row index of the clicked row
then a new row should add to the cilcked row's (rowindex+1) position. ie, just below the clicked row.
But now the problems arise is that
the onclick function inside button is not working , if i write it inside then it will work
the onclick of button in 'cell3' is not working
As i am a beginner in php and very beginner in javascript, can anyone please help me with detailed explanation
<script>
function myFunction(x) {
var table = document.getElementById("myTable");
var rowno=x.rowIndex;
alert(rowno);
var row = table.insertRow(rowno+1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text"s name="txt1">';
cell2.innerHTML = '<input type="text" name="txt2">';
cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';
}
</script>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>
</table>
You are passing the button to your function and trying to find its rowIndex which is not possible. You need to find the rowIndex of the button's parent row. I have modified the javascript code to select it. This should work.
<script type="text/javascript">
function myFunction(x) {
var table = document.getElementById("myTable");
var rowno = x.parentNode.parentNode.rowIndex; //this selects the button's parent row
alert(rowno);
var row = table.insertRow(rowno + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text"s name="txt1">';
cell2.innerHTML = '<input type="text" name="txt2">';
cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';
}
</script>
I have this javascript function:
function addItem(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="checkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "textbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
// *****I DO NOT KNOW WHAT GOES HERE*****
cell3.appendChild(element3);
}
I also have an HTML file that where it looks like this:
<header>
<div id="header-left">
<input type="checkbox" id="select-all"></input>
<label for="select-all" id="select-all-tag"> Select All </label>
</div>
<h1> TODO </h1>
<div id="header-right">
<button id="sort-by">Sort By</button>
<button id="add-new" onclick="addItem('todoTable')">Add</button>
</div>
</header>
<table id="todoTable" border="1">
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td><input type="text" /></td>
<script>
$(function() {
$(".date-picker").datepicker();
});
</script>
<td><input type="text" name="date[]" class="date-picker datepicker"></td>
</tr>
</table>
The HTML file creates the sort of row that I want. For the JavaScript, I am trying to add a row with a datepicker in the third cell, but I do not know how. So, how do I have a datepicker show in the third cell in JavaScript? Please let me know if you need clarification.
So long as you have the appropriate scripts included, this should suffice:
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
$(element3).datepicker();
Problem with this code is that when we want to add a row, it will add a row in only one column. Please can anybody tell me how to split the columns?
JavaScript:
function Myfunction(tableid) {
var table=document.getElementById("tablerow");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(0);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
HTML:
<body>
<table id="tablerow" border="1" align="center">
<tr>
<td><center>1</center></td>
<td><input type="textbox" name="" value=""></td>
<td><input type="textbox" name="" value=""></td>
<td><input type="textbox" name="" value=""></td>
</tr>
<tr>
<td><center>2</center></td>
<td><input type="textbox" name="" value=""></td>
<td><input type="textbox" name="" value=""></td>
<td><input type="textbox" name="" value=""></td>
</tr>
<center><input type="button" value="Add Row" onclick="Myfunction()">
You have four columns in the table but you were trying to insert row with only three cells. This resulted in invalid table structure.
Also, you should put each cell in its proper position by giving correct index when calling insertCell() method.
Here is working code that inserts row with four cells, first has "running index" and the rest have text boxes, each and its own textbox:
function Myfunction(tableid) {
var table=document.getElementById("tablerow");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 1;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
cell4.appendChild(element4);
}
Live test case.
This works, but pretty "clumsy". To have it more flexible and better written, add another function:
function CellWithTextbox(row, index) {
var cell = row.insertCell(index);
var element = document.createElement("input");
element.type = "text";
cell.appendChild(element);
return cell;
}
Then the last part of your function will turn to those simple lines:
var cell2 = CellWithTextbox(row, 1);
var cell3 = CellWithTextbox(row, 2);
var cell4 = CellWithTextbox(row, 3);
Updated fiddle.
I am new in javascript and I want to generate rows dynamically when "Tab" is pressed and want to get the values enterd in dynamically generated rows so that i could use these values in my servlet code.
Here is my html
<html>
<head>
<title> Add/Remove dynamic rows in HTML table </title>
<script src="table.js" language="javascript" /></script>
</head>
<body onload="hello()">
<form action="servletname">
<input type="button" value="Delete Row" onclick="deleteRow()" />
<table id="table1" width="350px" border="2">
<tr>
<td align="center"> Sr.No </td>
<td align="center" style="width:50px;"> Code </td>
<td align="center" style="width:1100px;"> Test Name </td>
<td align="center" style="width:80px;"> Rate </td>
</tr>
</table>
<table id="table2" width="350px" border="2">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td> 1 </td>
<td> <input type="text" id="tc" style="width:50px;" /> </td>
<td> <input type="text" id="tn" style="width:190px;" /> </td>
<td> <input type="text" id="rt" style="width:80px;" onkeypress="KeyCheck(event)" /> </td>
</tr>
</table>
<br><input type="text" id="rt1" style="width:80px;"/>
</form>
</body>
</html>
code of "row.js" file is:
function hello()
{
document.getElementById("tc").focus();
}
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if(KeyID==9)
{
addRow();
}
}
function addRow()
{
var table = document.getElementById("table2");
var rowCount = table.rows.length;
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.style.width = "50px";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4= document.createElement("input");
element4.type = "text";
element4.style.width = "80px";
cell5.appendChild(element4);
element4.focus(); // to shift focus on last cell in newly generated row
//to generate new row if enter is pressed in focused cell of newly generated row.
element4.onkeypress=KeyCheck;
}
But it doesnot detect "Tab" or any other key except than "Enter" key. plz tell me how to detect "Tab" or some other key in this program and how can I access values entered in these dyanamically generated rows.
Use the following js function for add row:
function addRow() {
var table = document.getElementById("table2");
var rowCount = table.rows.length;
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.style.width = "50px";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.style.width = "80px";
element4.onkeypress = KeyCheck;
cell5.appendChild(element4);
element4.focus();// to shift focus on last cell in newly generated row
//to generate new row if enter is pressed in focused cell of newly generated row.
}
You're setting up the event handler incorectly. It should be:
element4.onkeypress=KeyCheck
http://jsfiddle.net/SMDhu/4/
For Tab key you need to handle keydown with keycode 9.
To get the value inside the value inside the field, simply access the value property of the DOM element.
http://jsfiddle.net/mihaifm/24s8e/2/