How to add a name attribute to a dynamically generated <tr> - javascript

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

Related

Can I put <input> tag in insertRow() function? Not only text

I want to use insertRow() function for adding rows in my table. but can I insert a row which contain <input> tag. because my table look like this
<table><thead>
<tr>
<th>No Account</th>
<th>Deskripsi</th>
<th>Debit</th>
<th>Credit</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input-td" type="text" placeholder="No Account">
</td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="-"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
<td><input class="input-td" type="text" placeholder="0"></td>
</tr></thead>
</table>
<i class="fa fa-plus"></i>&nbsp Add row
so far i could only find this example for the javascript code
function myCreateFunction() {
var table = document.getElementById("bootstrap-data-table");
var row = table.insertRow(3);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "0";
cell2.innerHTML = "0";
cell3.innerHTML = "0";
cell4.innerHTML = "0";
cell.innerHTML = "0";
}
could I change "0" which is only text to being input tag like the previous row?
You could just assign an HTML string:
cell1.innerHTML = `<input class="input-td" type="text" placeholder="No Account">`;
Other options include creating the DOM via document.createElement and the like.
const input1 = document.createElement("input");
input1.classList.add("input-td");
input1.type = "text";
input1.placeholder = "No Account";
cell1.appendChild(input1);

How to count rows on dynamically created rows with javascript

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

Insert new row just below the clicked row with the use of rowIndex

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>

jqueryUI datepicker on a Javascript created field

I am working with Javascript and based of a radio select it changes the fields in a form. The fields are generated with the Javascript. That part is operating very nicely however one of the fields is also a date that I am trying to use the jQueryUI datepicker with. For some reason it is not running the Javascript on a Javascript created field. I'm not sure if it is my order the scripts are in or what but any help would be appreciated. Here is a JSFiddle with the code I am using. It isn't running because I don't have all of the dependencies linked but you get an overview of how I have it set up. I can put more time putting in the dependencies if you feel it's needed or a link to my page.
* I was playing around with it and noticed that when I initially click on the date select it doesn't do anything but when I click another field and go back to it, it then works?
Right now I am focusing on the field that becomes available in the javascript when Pick up is selected which is on line 22 of the Javascript.
Thanks guys!
http://jsfiddle.net/hn9Qe/
Javascript
function show(x)
{
var element=document.getElementById(x.id);
if(element.id=='a')
{
var table = document.getElementById("myTable");
var length = table.rows.length;
if(length > 9)
{
var del1 = table.deleteRow(5);
var del2 = table.deleteRow(5);
var del3 = table.deleteRow(5);
}
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var row2 = table.insertRow(6);
var cell3 = row2.insertCell(0);
var cell4 = row2.insertCell(1);
cell1.innerHTML = "Pick-Up Date:";
//For right now just focusing on getting this datepicker to properlly popup.
cell2.innerHTML = "<input type='text' name='datepicker' id='datepicker' onFocus=dateSelect()>";
cell3.innerHTML = "Pick-Up Time:";
cell4.innerHTML = "<input type='text' name='txtTime' id='txtTime'>";
}
else
{
var table = document.getElementById("myTable");
var length = table.rows.length;
if(length > 9)
{
var del1 = table.deleteRow(5);
var del2 = table.deleteRow(5);
}
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var row2 = table.insertRow(6);
var cell3 = row2.insertCell(0);
var cell4 = row2.insertCell(1);
var row3 = table.insertRow(7);
var cell5 = row3.insertCell(0);
var cell6 = row3.insertCell(1);
cell1.innerHTML = "Delivery Date:";
cell2.innerHTML = "<input type='text' name='txtDelDate' id='txtDelDate'>";
cell3.innerHTML = "Delivery Time:";
cell4.innerHTML = "<input type='text' name='txtDelTime' id='txtDelTime'>";
cell5.innerHTML = "Delivery Address:";
cell6.innerHTML = "<input type='text' name='txtDelTime2' id='txtDelTime2'>";
}
}
function dateSelect()
$(function() {
$( "#datepicker" ).datepicker();
});
HTML Form
<form action="cateringSubmit" method="post">
<table id="myTable" width="600" border="0">
<tr>
<td>Company Name</td>
<td><span id="sprytextfield1">
<input type="text" name="datepicker2" id="datepicker2">
<span class="textfieldRequiredMsg">A value is required.</span></span></td>
</tr>
<tr>
<td>Contact Name</td>
<td><span id="sprytextfield2">
<input type="text" name="txtConName" id="txtConName">
<span class="textfieldRequiredMsg">A value is required.</span></span></td>
</tr>
<tr>
<td>Contact Phone Number</td>
<td><span id="sprytextfield3">
<input type="text" name="txtPhone" id="txtPhone">
<span class="textfieldRequiredMsg">A value is required.</span></span></td>
</tr>
<tr>
<td>Email Address</td>
<td><span id="sprytextfield4">
<input type="text" name="txtEmail" id="txtEmail">
<span class="textfieldRequiredMsg">A value is required.</span></span></td>
</tr>
<tr>
<td>Pick-Up or Delivery</td>
<td><input name="radioButton" type="radio" id="a" onclick="show(a)">Pick-Up
<input type="radio" onclick="show(this)" name="radioButton" id="b" >Delivery</td>
</tr>
<tr>
<td>Order:</td>
<td><textarea name="txtOrder" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td>Special Pricing (if applicable): </td>
<td><input name="txtPricing" type="text"></td>
</tr>
<tr>
<td>Special Requests: </td>
<td><textarea name="txtRequests" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="btnSubmit" type="submit" value="Submit" ></td>
</tr>
</table>
</form>
</p>
Since those textbox 's are created dynamically you have to attach those event to document like
$(document).on('focus', '.datepicker', function () {
$(this).datepicker();
});
Also since you're using 2 datepicker I have used class selector for those elements.
JSFiddle
The JSFiddle is failing for a few reasons:
jQuery library isn't being loaded
Missing function brackets for dateSelect()
Use of inline onClick and onFocus attributes
I would suggest you move to using jQuery's click() and focus() methods to detect click and focus events for your radio buttons. Hopefully this fixes your issue.

How to add rows by splitting columns in javascript dynamically

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.

Categories