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>
Related
I am having a hard time in inserting table rows dynamically since I haven't really tried it before. What I'm supposed to do is to insert a new table row with a select box with options from the an arraylist.
So far, this is my code:
HTML
<TABLE id="dataTable">
<TR>
<TD> 1</TD>
<TD>
<select name="option">
<%for(int i = 0; i < jList.size(); i ++){%>
<option value="<%=jList.get(i).getName%>"><%=jList.get(i).getName%></option>
<%}%>
</select>
</TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
JAVASCRIPT
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//how do i put the options from the arraylist here?
cell2.appendChild(element2);
}
also, I would also like to know how to pass a variable from the javascript function to a java servlet because every time I pass the variable count in a hidden input type, the input does not contain the count. I hope you can help me with my dilemma.
Just after you create the "select" element You can simply loop through your"arraylist" and append the options :
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//Append the options from the arraylist to the "select" element
for (var i = 0; i < arraylist.length; i++) {
var option = document.createElement("option");
option.value = arraylist[i];
option.text = arraylist[i];
element2.appendChild(option);
}
cell2.appendChild(element2);
}
Take a look at this fiddle : https://jsfiddle.net/bafforosso/66h3uwtd/2/
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 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
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 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.