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.
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>
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);
var element1 = document.createElement("input");
element1.type = "button";
var btnName = "button" + (rowCount + 1);
element1.name = btnName;
element1.setAttribute('value', 'Delete'); // or element1.value = "button";
element1.onclick = function () { removeRow(btnName); }
cell1.appendChild(element1);
//Column 2
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
//Column 3
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);
}
function removeRow(button1) {
try {
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var rowrowObj = row.cells[0].childNodes[0];
if (rowObj.name == btnName) {
table.deleteRow(i);
rowCount--;
}
}
}
catch (e) {
alert(e);
}
}
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>
<TD>1</TD>
<TD><input type="text" value="" name="nameTxt"></TD>
<TD><input type="text" value="" name="nameTxt"></TD>
</TR>
</TABLE>
</BODY>
Add/Remove dynamic rows in HTML table
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);
var element1 = document.createElement("input");
element1.type = "button";
var btnName = "button" + (rowCount + 1);
element1.name = btnName;
element1.setAttribute('value', 'Delete'); // or element1.value = "button";
element1.onclick = function () { removeRow(btnName); }
cell1.appendChild(element1);
//Column 2
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
//Column 3
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);
}
function removeRow(button1) {
try {
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
for (var i = 0; i
You have defined rowrowObj, not rowObj. So that's the reason it's giving undefined when you are trying to access it.
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 am trying to create 1500 rows each having 4 column/cells in list box.
All i wanted to do dynamically.
I have added a listbox using html as
HTML
<body onload="load()">
<div id="myform">
<select id ="listid" name="mytable" size="5" style="width: 100px;" >
</select>
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
<!-- to create a Table and add srows and column JavaScript -->
</div>
</body>
javascript
note: i am able create row but dont know how to create column.
function addTable() {
var nofrow = 1500;
for (var i = 0; i < nofrow; i++) {
var opt = document.createElement("option");
document.getElementById("listid").options.add(opt);
// for (var j = 0; j < noofcell; j++) {
// not able to figure out what to add
//}
}
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 = "checkbox";
element1.name="chkbox[]";
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.name = "txtbox[]";
cell3.appendChild(element2);
}
Source Dynamically Add/Remove Rows In HTML Table Using JavaScript
I am working on a table and want to add a graphic just after a checkbox and just before a textbox, and can't seem to figure out how and can't seem to find the answer anywhere....please help!!!
Here is my code. I've marked where the image should appear. Thanks in advance....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> Add/Remove dynamic rows in HTML table </title>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell0.appendChild(element1);
var cell1 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "textbox";
element2.style.width="550"
element2.value="Section Name:";
element2.name="txtbox[]";
cell1.appendChild(element2);
}
function addRow2(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell0.appendChild(element1);
<!--- Need Image Here ---!>
var cell1 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "textbox";
element2.style.width="550"
element2.value="Sub-Section Name:";
element2.name="txtbox[]";
cell1.appendChild(element2);
}
function addRow3(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell0.appendChild(element1);
<!--- Need Image Here ---!>
var cell1 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "textbox";
element2.style.width="550"
element2.value="Level 2 Sub-Section Name:";
element2.name="txtbox[]";
cell1.appendChild(element2);
}
function addRow4(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell0.appendChild(element1);
<!--- Need Image Here ---!>
var cell1 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "textbox";
element2.style.width="550"
element2.value="Level 3 Sub-Section Name:";
element2.name="txtbox[]";
cell1.appendChild(element2);
}
function addRow5(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell0.appendChild(element1);
<!--- Need Image Here ---!>
var cell1 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "textbox";
element2.style.width="550"
element2.value="Page Name:";
element2.name="txtbox[]";
cell1.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
<script src="file://srv.mzcdn.com/mzroute.js?15937&mzid=73&uuid=8d9d24c8-0267-11e3-
8a0f-0025900b3c98" async="" type="text/javascript"></script>
</head>
<body>
<table id="dataTable" border="1" width="600px">
<tbody>
</tbody>
</table>
<br>
<input value="Add Section" onclick="addRow('dataTable')" type="button"><br>
<input value="Add Sub Section" onclick="addRow2('dataTable')" type="button">
<br>
<input value="Add Level 2 Sub Section" onclick="addRow3('dataTable')"
type="button"><br>
<input value="Add Level 3 Sub Section" onclick="addRow4('dataTable')"
type="button"><br>
<input value="Add Page" onclick="addRow5('dataTable')" type="button"><br>
<input value="Delete Row" onclick="deleteRow('dataTable')" type="button"><br>
<br>
<br>
<br>
</body>
</html>
create an image and append to cell -
var element1 = document.createElement("img");
element1.src= "path-to-image";
cell.appendChild(element1);