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.
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>
I'm trying to add a onclick event to a newly dynamically created button inside a row cell in a table.
When I try to use the button this appears in the console:
"Uncaught ReferenceError: i is not defined"
How can I access the variable i to put it inside the parenthesis of the change() function?
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change(i)"/>';
Edit: So here is the entire function, i is a number that increases by 1 every time this function is used. The variable count is equal to the length of the table.
function save(){
var myTable = document.getElementById("myTable");
var i = count;
// Create an empty <tr> element and add it to the 1st position of the table:
var row = myTable.insertRow(myTable.rows.length);
row.id="row-"+i;
// Insert new cells (<td> elements)in the"new" <tr> element:
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
var cell7 = row.insertCell(7);
var cell8 = row.insertCell(8);
var cell9 = row.insertCell(9);
var cell10 = row.insertCell(10);
// Add some text to the new cells:
cell0.innerHTML = document.getElementById("fname2").value;
cell1.innerHTML = document.getElementById("lname2").value;
cell2.innerHTML = document.getElementById("cemail2").value;
cell3.innerHTML = document.getElementById("pnumber2").value;
cell4.innerHTML = document.getElementById("city2").value;
cell5.innerHTML = document.getElementById("address2").value;
cell6.innerHTML = document.getElementById("postalCode2").value;
cell7.innerHTML = document.getElementById("province2").value;
cell8.innerHTML = document.getElementById("cpwd2").value;
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change(i)"/>';
}
You have to inject the i into element by string concatenation or Template literals like below
cell9.innerHTML ='<input type = "button" value = "Edit" onclick="change('+ i + ')"/>';
or
cell9.innerHTML =`<input type = "button" value = "Edit" onclick="change(${i})"/>`;
I am trying to add several buttons to a table using javascript, however I keep being offered this result with [objectHTMLInputElement]
Here is my code:
function createDiseaseTable(country){
var displayCountry = document.getElementById("countrySelected");
displayCountry.innerHTML = country.name;
var diseaseTable = document.getElementById("diseases");
diseaseTable.innerHTML = "";
for (var i = 0; i<country.diseases.length; i++) ////////////////////////////////////
{
var changeDisease = document.createElement('input');
changeDisease.type = 'button';
changeDisease.name = "x"
changeDisease.onclick = hi();
var row = diseaseTable.insertRow(i);
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 = OurDiseases[i].name;
cell2.innerHTML = OurDiseases[i].cureLevel;
cell3.innerHTML = OurDiseases[i].killLevel;
cell4.innerHTML = OurDiseases[i].cured;
cell5.innerHTML = changeDisease;
console.log(changeDisease);
}
var row = diseaseTable.insertRow();
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 = "Disease";
cell2.innerHTML = "Level needed to cure";
cell3.innerHTML = "Deaths each year";
cell4.innerHTML = "Cured";
cell5.innerHTML = "More Info";
}
Note: I'm not concerned about not running a function yet upon click, i just want the actual button to appear
you need to use the appendChild function
your code could than look like this:
...
cell5.appendChild(changeDisease);
...
You can find more details on this function here: http://www.w3schools.com/jsref/met_node_appendchild.asp
Update - see comment:
name is an attribute of an element and not the caption of the button, if you want to set the caption use the attribute value instead - here is an example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_button
It's been a long time since I've done DOM manipulation without jQuery, but I believe you need to do cell5.appendChild(changeDiseas) rather than .innerHTML (which is expecting an HTML string).
http://www.w3schools.com/jsref/met_node_appendchild.asp
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 Have a table with rows added dynamically. These rows contain a date picker and dropdown, I am able to set classname on the but not on the datepicker and dropdown using .className()
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.className = "row1 part";
var cell1 = row.insertCell(0);
cell1.className = "value";
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className = "date-pick"; // this fails
element1.setAttribute('value', '2013/10/04');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.name = "prddrop[]";
element2.id = "prddrop[]";
element2.className = "bankopt"; //this also fails
element2.options[element2.length] = new Option("[-- Please Choose --]", "[-- Please Choose --]");
var arr_items = [{
"IssuingBank": " --- "
}, {
"IssuingBank": " --- "
}];
$(document).ready(function () {
for (var i = 0; i < arr_items.length; i++) {
element2.options[element2.length] = new Option(arr_items[i].IssuingBank, arr_items[i].IssuingBank);
}
});
cell2.appendChild(element2);
Please help me with this... Thanks!
Remember that .appendChild() returns the element.
So you could do:
cell1.appendChild(element1).className = "class_to_add";
Another way:
You can use setAttribute (NOTE: This will not work on IE8 and earlier versions as stated by #om in the comments.)
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);
This should work for you. Across all browsers.
var yourClass = document.createAttribute("class");
yourClass.value = "date-pick";
element1.setAttributeNode(yourClass);