I am adding rows to an HTML table which already has 2 rows, using below javascript code:
<table id="dataTable" class="CSSTableGenerator">
<tbody>
<tr>
<td><label>No.of internal corners</label></td>
<td><input type="text" id="intCorner" class="corner"></td>
<td><label>No.of external corners</label></td>
<td><input type="text" id="extCorner" class="corner"></td>
</tr>
</tbody>
<tr>
<td><label>Wall 1</label></td>
<td><label>Wall 2</label></td>
<td><label>Wall 3</label></td>
<td><label>Wall 4</label></td>
</tr>
<tr>
<td><input type="text" id="wall00" class="wall"></td>
<td><input type="text" id="wall01" class="wall"></td>
<td><input type="text" id="wall02" class="wall"></td>
<td><input type="text" id="wall03" class="wall"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add more walls" onclick="addRow('dataTable')">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element0 = document.createElement("input");
element0.type = "text";
element0.name = "txtbox[]";
element0.className ="wall";
element0.id="wall"+rowCount-2+"0";
cell0.appendChild(element0);
var cell1 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className ="wall";
element1.id="wall"+rowCount-2+"1";
cell1.appendChild(element1);
var cell2 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className ="wall";
element2.id="wall"+rowCount-2+"2";
cell2.appendChild(element2);
var cell3 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.className ="wall";
element3.id="wall"+rowCount-2+"3";
cell3.appendChild(element3);
}
But when I use below code to get value of dynamically added cells it says that document.getElementById() is null inside for loop. It works for cells added by HTML code.
function sumOppositeWalls(){
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
alert(rowCount);
var minusCount=0;
for(var i=0;i<rowCount-2;i++){
var wall1=parseFloat(document.getElementById('wall'+i+'0').value);
var wall2=parseFloat(document.getElementById('wall'+i+'1').value);
}
Please suggest any solution or let me know if I am doing some mistake.
The problem is how is are creating the id for the dynamic elements.
You are using numeric subtraction along with string concatenation like element2.id="wall"+rowCount-2+"2"; which is wrong.
You need to separate the numerical computation out as a separate unit, else "wall"+rowCount will get processed with will give wall2 then 'wall2' - 1 will be NaN since one operand is not a number so the end result will be something like NaN2
element2.id="wall"+(rowCount-2)+"2";
Since you are using the rowCount-2 value in multiple places, use a variable
var idCounter = rowCount - 2;
then
element0.id = "wall" + idCounter + "0";
Demo: Fiddle
Related
I want to insert the options in the last cell of the table. Please let me know how to access the properties of a Combobox for reading and writing.
var DeviceNames = new Array ("Dev1", "Dev2");
function addoption(select_id, text, rowcnt) {
select=document.getElementById(select_id);
var row = select.rows[rowcnt-1];
var rowObj = row.cells[4];
var option = document.createElement("option");
option.innerHTML = text;
option.value = 1;
rowObj.options.add(option);
}
function loadcombo(select_id, option_array, cnt)
{
for (var i = 0; i < option_array.length; i++)
{
addoption (select_id, option_array[i], cnt);
}
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount+1;
//Column 2
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("select");
cell5.appendChild(element5);
loadcombo(tableID, DeviceNames, rowCount);
}
<INPUT type="button" value="Add Entry" onclick="addRow('dataTable')" />
<INPUT type="button" value="Insert Entry" onclick="addRow('dataTable')" />
<INPUT type="button" name="button1" value="Delete Entery" onclick="removeRow('button1')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
I want to insert the options in the last cell of the table. Please let me know how to access the properties of a Combobox for reading and writing.
Program Design
Without a specification code can get confused, so let's assume a spec of
Click the Add button to add a table row with a row number in the first column, several input elements in following columns, and a select element in the last column
All select elements should have options for entries in the DeviceNames array.
Each option should have a value attribute taken from the index of option text in DeviceNames. The example below calculates value using a ones based index but can always be changed to suite requirements.
Changes
Select elements didn't have id's. It would be possible to give them id or name attribute based on the table row they occur in, but the code snippet below does not attempt to do so.
HTMLSelectElement elements have an add method to add options.
Element objects themselves are passed as parameters to functions which need to operate on the DOM object.
A minor change: use textContent rather than innerHTML if the content is text. While innerHTML may work, it parses text inserted as HTML markup.
Snippet
var DeviceNames = new Array ("Dev1", "Dev2");
function addoption(select, text, optionValue) {
var option = document.createElement("option");
option.textContent = text;
option.value = optionValue;
select.add(option);
}
function loadcombo(select, option_array) {
for (var i = 0; i < option_array.length; i++) {
var value = i+1;
addoption (select, option_array[i], value);
}
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
cell1.textContent = rowCount+1;
//Column 2
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var select = document.createElement("select");
cell5.appendChild(select);
loadcombo(select, DeviceNames);
}
<INPUT type="button" value="Add Entry" onclick="addRow('dataTable')" />
<INPUT type="button" value="Insert Entry" onclick="addRow('dataTable')" />
<INPUT type="button" name="button1" value="Delete Entry" onclick="removeRow('button1')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
1.This is my java script code for creating a dynamic table
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("select");
element3.type = "select-one";
element3.name = "select1";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name = "chkbox1";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox2";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "checkbox";
element6.name = "chkbox2";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name = "chkbox3";
cell7.appendChild(element7);
cell1.innerHTML = rowCount;
}
function getValues() {
document.write("inside getvalues")
var values = [];
var text = document.getElementsId('columnName');
for (var i=0; i<text.length; ++i) {
values.push(text[i].value);
}
alert(values); //the values array will contain the text from each textarea element
}
</script>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form action="" method="post" onsubmit="getValues()">
<h1>csv file Structure</h1>
<table id="myTable">
<tr>
<td id="index">Index</td>
<td id="columnName">Column Name</td>
<td id="dataType">Data Type</td>
<td id="checkbox">Checkbox</td>
<td id="default">Default</td>
<td id="notNull">Not Null</td>
<td id="primaryKey">Primary Key</td>
</tr>
</table>
<input type="submit" value="submit" name="createStructure">
<br><br>
<!-- <button onclick="getValues('myTable')">Submit</button> -->
<br>
</form>
<button onclick="myFunction('myTable')">add new column</button>
</body>
</html>
3.Thanks in advance
you can do that by using a dynamic parameter.Let that dynamic parameter be i,you need to change your element names like
element2.name = "txtbox1" //old name
change it to
element2.name = "txtbox"+i;
i value can be the count of rows in your dynamically generated table..
and you can get them in your servlet uisng request.getParameter
I have a table that a user can dynamically add a row as needed. I need to add a text box underneath the table that will dynamically output the total of the last column using JavaScript. If the calculations can't be done dynamically then I can add a calculate button underneath the text box
<HTML>
<HEAD>
<SCRIPT language="javascript">
function addRow(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 = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "text";
cell7.appendChild(element7);
}
function Calculate(tableID) {????
}
</SCRIPT>
</HEAD>
<BODY>
<table id="dataTable">
<tr><td><input type="button" value="Add Row" onclick="addRow('dataTable')"/></td></tr>
<tr><td>Class Description</td><td>Class Code</td><td>Rate</td><td>Other</td><td>Final Rate</td><td>Exposure</td><td>Premium</td></tr>
<tr><td><input type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:90px" type="text"/></td></tr>
</table>
//Text box output total of Premium
</BODY>
</HTML>
Any help will be greatly appreciated.
An answer is provided in the Fiddle, you need to iterate on all the inputs and calculate the fields:
function Calculate(tableID) {
var inputs = document.querySelectorAll("#" + tableID + " input");
var total = 0;
for (var i = 0; i < inputs.length; i++) {
if (!isNaN(parseInt(inputs[i].value))) {
total += parseInt(inputs[i].value);
}
}
alert(total)
}
http://jsfiddle.net/KK47L/
You can use the calculate function and reflect the results in another div/cell/alert.
I wonder whether someone could help me please.
Using some examples I found I've adapted some code, as shown below, that allows a user to add and delete table rows.
Javascript Code
function addRow(addimagetable) {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "radio";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "file";
cell3.appendChild(element3);
}
function deleteRow(addimagetable) {
try {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var radio = row.cells[0].childNodes[0];
if (null != radio && true == radio.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
HTML Table
<div>
<input type="button" value="Add Row" onclick="addRow('addimagetable')" /> <input type="button" value="Delete Row"
onclick="deleteRow('addimagetable')" />
<table id="addimagetable" width="407" border="1">
<tr>
<td width="20"><input type="radio" name="radio" /></td>
<td width="147"><input type="text" name="title" /></td>
<td width="218"><input type="file" name="image" /></td>
</tr>
</table>
</div>
As you can see from the table code above, the rows are either added or deleted via a button 'click'. What I've been trying to work out is how to get rid of the 'Add' button, instead replacing it with a function whereby if a row has data in cells '2' and '3' a new row below is created.
I've been working on this for a while now and I just can't seem to find a way to get this to work.
I just wondered whether someone could perhaps give me a helping hand and show me where I'm going wrong.
Many thanks
I found your question as I was trying to sort out a similar issue. I used your case (as it was simpler than mine) to troubleshoot the issue... I thought it was only fair to share the outcome with you.
The following code checks every time one of your two monitored inputs in each row loses focus - if both monitored inputs for the row have values (and the row has not caused an additional row to be generated yet) then a new row is added below.
HTML:
<input type="button" value="Add Row" onclick="addRow('addimagetable')" />
<input type="button" value="Delete Row" onclick="deleteRow('addimagetable')" />
<table id="addimagetable" width="407" border="1">
<tr>
<td width="20"><input type="radio" name="radio"/></td>
<td width="147"><input type="text" name="title" onblur="check(1)" /></td>
<td width="218"><input type="file" name="image" onblur="check(1)" /></td>
</tr>
</table>
Script:
<script>
var numrows = 1; // because you are starting with 1 row visible
var rowsarray = ["0", "0"];
function addRow(addimagetable) {
numrows = numrows + 1;
rowsarray[numrows] = "0";
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "radio";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
element2 = cell2.getElementsByTagName("input")[0];
element2.setAttribute("onblur","check("+numrows+")");
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "file";
cell3.appendChild(element3);
element3 = cell3.getElementsByTagName("input")[0];
element3.setAttribute("onblur","check("+numrows+")");
}
function deleteRow(addimagetable) {
try {
var table = document.getElementById(addimagetable);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var radio = row.cells[0].childNodes[0];
if(null != radio && true == radio.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function check(num) {
table = document.getElementById('addimagetable');
row = table.getElementsByTagName("tr")[num-1];
c1 = row.getElementsByTagName("td")[1].getElementsByTagName('input')[0].value;
c2 = row.getElementsByTagName("td")[2].getElementsByTagName('input')[0].value;
if ((c1 !== "") && (c1 !== null ) && (c2 !== "") && (c2 !== null) && (rowsarray[num] !== 1)) { addRow('addimagetable'); rowsarray[num] = 1; }
}
</script>
I want to add few text boxes at dynamic position in a form.
Say something like this
I have JavaScript like this:
function addRow(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 type="checkbox" name="chk">');
cell1.appendChild(element1);
var cell4 = row.insertCell(3);
var element4 = document.createElement('<INPUT type="text" name="SubpartID"/>');
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement('<INPUT type="text" name="Quantity" value="1" />');
cell5.appendChild(element5);
}
but problem with this script is, When I click "Add Subpart Input Row" button, I am able to see a new row added but only with check box in that.
I guess cell4.appendChild(element4); and cell5.appendChild(element5); does not work.
So the output looks like this,
Could you please help?
Seems you are using document.createElement the wrong way. You need to do it like this:
var element5 = document.createElement('input');
element5.type = 'text';
element5.name = 'Quantity';
element5.value = 1;
cell5.appendChild(element5);
Should be the same for the rest except with different attributes and value.