Develop Reference

How to calculate the amount in invoice for dynamically created input field in codeigniter

I am doing invoices in Codeigniter. I want to calculate the amount and I am able to do first rows (dynamically created). But for second-row, it's not working. can someone help me with this? I hope my question is straightforward...
My code for inserting rows dynamically
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length-1;
var row = table.insertRow(rowCount);
//Column 1
var cell1 = row.insertCell(0);
cell1.innerHTML = '<input type="text" name="item[]" id="item">'
//Column 2
var cell2 = row.insertCell(1);
cell2.innerHTML = '<input type="number" name="qty[]" id="qty" onkeyup="calc()">';
//Column 3
var cell3 = row.insertCell(2);
cell3.innerHTML = '<input type="number" name="rate[]" id="rate">';
//Column 4
var cell4 = row.insertCell(3);
cell4.innerHTML = '<input type="number" name="tax[]" id="tax">';
//Column 5
var cell5 = row.insertCell(4);
cell5.innerHTML = '<input type="number" name="amound[]" id="amound" readonly>';
//Column 6
var cell6 = row.insertCell(5);
cell6.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row btn btn-danger"/>';
}
$(document).on('click', '.delete-row', function() {
$(this).parents('tr').remove();
});
and here is my js code for calculation
function calc(){
var textValue1 = document.getElementById('qty').value;
var textValue2 = document.getElementById('rate').value;
var textValue3 = document.getElementById('tax').value;
var mul = textValue1 * textValue2;
var tax = mul*(textValue3/100);
var result = +textValue2 + +tax;
document.getElementById('amound').value = result;
}

The main problem with your script is that you are using ID instead of Classes on your input elements. ID's should be unique, classes can be repeated x amount of times. And you are combining vanilla javascript with jQuery javascript.
Try to compare your own code with the example script I created. Hopefully, you can see the difference and add it to your own script.
My example:
https://jsfiddle.net/tnv73mL4/
var myTable = $("#myTable");
$(document).on('click', '.delete-row', function() {
$(this).parents('tr').remove();
});
$(document).on('keyup', 'input', function() {
inputs = $(this).parents('tr');
calc(inputs);
});
function calc(inputs){
var qty = inputs.find('.qty').val();
var rate = inputs.find('.rate').val();
var tax = inputs.find('.tax').val();
var mul = qty * rate;
var tax = mul*(tax/100);
var result = +rate + +tax;
inputs.find('.amount').val(result);
}

Managing elements of a dynamicly produced table

A button , onclick , adds a table row with three cells. In the first cell theres a textbox where you input an image url, the second cell contains a button.When pressed the button shows the image that the url refers to on the third cell.
Doing this for one row is simply, but i cant get it to work for subsequent rows because the id of each element would remain the same.
I need some tips and ideas.
Code sample:
<script>
var u = 1;
function addRows() {
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur" type="url" >';
cell2.innerHTML = '<button onclick="document.getElementById(\'im1\').src = document.getElementById(\'ur\').value;">Add Image</button>';
cell3.innerHTML = '<img id="im1" src="" alt="image">';
u++;
}
</script>
Each row generates fine and if you put in a url or the name of a local image file it will display properly on the third cell.
But it only works on the first generated row.

With this sort of thing you shouldn't be calling and duplicating ids but instead relying on Sibling properties. Nevertheless a quick hack would be to use your increment variable to give unique ids to the elements.
var u = 1;
function addRows(){
var table = document.getElementById("t1");
var row = table.insertRow(u);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input id="ur'+u'" type="url" >' ;
cell2.innerHTML = '<button onclick="document.getElementById(\'im'+u'\').src = document.getElementById(\'ur'+u+'\').value;">Add Image</button>' ;
cell3.innerHTML = '<img id="im'+u+'" src="" alt="image">' ;
u++;
}
</script>

This should work:
function addRow() {
var table = document.getElementById("tab");
var row = document.createElement("tr");
var buttonTd = document.createElement("td");
var button = document.createElement("button");
button.type = "button";
button.innerHTML = "Show image";
buttonTd.appendChild(button);
var textboxTd = document.createElement("td");
var textbox = document.createElement("input");
textbox.type = "text";
textboxTd.appendChild(textbox);
var imageTd = document.createElement("td");
var image = document.createElement("img");
imageTd.appendChild(image);
row.appendChild(textboxTd);
row.appendChild(buttonTd);
row.appendChild(imageTd);
button.addEventListener("mousedown", function () {
image.src = textbox.value;
});
table.appendChild(row);
}
table,tr,td {
border: 1px solid black;
border-collapse: collapse;
}
<button onclick="addRow()">Add Row</button>
<table id="tab"></table>

How to dynamically insert a table row with a select box with options in a table using javascript?

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/

javascript dyanmic table add / delete row

I am trying to build a form for creating a list for image deployment.
I am able to create a dynamic table on form load and also collect the data for each value, but can seem to get the Add and Delete working.
My Question:
What must I do(or change) in my code to get the ADD and Delete options working and to export the table data in CSV format.
Please could someone help and/or guide me as I am getting so lost and really would like a working example .. there is so much on the net it's over-whelming
Newest place I visited is Mozilla DOM help pages what's confusing is how to load your own variables into the table
For reference I used stackoverflow and plenty google and finally this site
Here is my code:
<div id="metric_results">
Enter Target Name:
<input type="text" name="textbox1" id="textbox1" VALUE="win2k8"/>
<br>
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
<input type="button" id="create" value="Add Row" onclick="Javascript:addRow()">
<input type="button" id="create" value="Delete Row" onclick="Javascript:deleteRow()">
</div>
<SCRIPT LANGUAGE="JavaScript">
window.onload =addTable;//loads table on window loading
function addTable() {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
var tableBody = document.createElement('TBODY')
var imageName = textbox1.value
table.border = '1'
table.appendChild(tableBody);
var heading = new Array();
heading[0] = "imageName"
heading[1] = "acceptAllEula"
heading[2] = "noSSLverify"
heading[3] = "noVerification"
heading[4] = "TargetImagelocation"
heading[5] = "Username"
heading[6] = "Password"
heading[7] = "Target IP"
var imageInfo = new Array()
imageInfo[0] = new Array(imageName, "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")
imageInfo[1] = new Array("win2008", "acceptAllEula", "noSSLverify", "noVerification", "testLocation", "user", "pass", "192.168.1.151")
//TABLE COLUMNS
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
var th = document.createElement('TH')
th.width = '75';
th.appendChild(document.createTextNode(heading[i]));
tr.appendChild(th);
}
//TABLE ROWS
for (i = 0; i < imageInfo.length; i++) {
var tr = document.createElement('TR');
for (j = 0; j < imageInfo[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(imageInfo[i][j]));
tr.appendChild(td)
}
tableBody.appendChild(tr);
}
myTableDiv.appendChild(table)
}
function addRow() {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
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);
}
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--;
}
}
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>

You're not setting any id to the table you're creating onload - so when you later come to call getElementById() inside addRow it cannot be found (and you're using a variable which does not exist - tableID!)
My suggestion is to take an id as a parameter to addTable, and set that as the id of the dynamically generated table:
function addTable(id) {
var myTableDiv = document.getElementById("metric_results")
var table = document.createElement('TABLE')
table.id = id;
....
onload, pass somethig sensible - default perhaps:
window.onload = function(){
addTable("default");
}
And either pass this in when adding a row, or use the default provided above:
function addRow() {
var table = document.getElementById("default");
....
or
function addRow(id) {
var table = document.getElementById(id);
Updated fiddle: https://jsfiddle.net/egtu5kay/5/
Left as an exercise for you: Correctly formatting the new row as you wish.

Dynamically Add & Delete Table Row

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>