Multiplying inputs with dynamic add - javascript

I have 3 fields with inputs:
<div class="row">
<input onblur="calc_basic_amount();" id="rate_basic"></input>
<input onblur="calc_basic_amount();" id="qty_basic"></input>
<input id="basic_amount"></input>
</div>
Multiply rate_basic by qty_basic with js:
function calc_basic_amount(){
var qty_basic = document.getElementById('qty_basic').value;
var rate_basic = document.getElementById('rate_basic').value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount').value = basic_amount.toFixed(2);
}
It works fine, but I have a button that add a row with the same inputs and the same id, but the calculation only works with the first row. How to make it work with all inputs? thanks
Add function to row:
function add_row_to_table() {
table_row += '<td><input id="qty_basic" type="number" min="0" onblur="calc_basic_amount();" onchange="calc_basic_amount();" data-quantity name="newitems[' + item_key + '][qty]" value="' + data.qty + '" class="form-control">';
table_row += '<input type="text" placeholder="' + app.lang.unit + '" name="newitems[' + item_key + '][unit]" class="form-control input-transparent text-right" value="' + data.unit + '" >';
table_row += '</td>';
table_row += '<td class="rate"><input id="rate_basic" type="number" data-rate data-toggle="tooltip" title="' + app.lang.item_field_not_formatted + '" onblur="calc_basic_amount();" data-rate onchange="calc_basic_amount();" name="newitems[' + item_key + '][rate]" value="' + data.rate + '" class="form-control"></td>';
table_row += '<td class="amount_basic" align="right"><input id="basic_amount" class="form-control"></td>';
table_row += '<td><i class="fa fa-trash"></i></td>';
table_row += '</tr>';
}

You should add dynamic id
<div class="row">
<input onblur="calc_basic_amount(1);" id="rate_basic1"></input>
<input onblur="calc_basic_amount(1);" id="qty_basic1"></input>
<input id="basic_amount1"></input>
</div>
Now when you create New Row
<div class="row">
<input onblur="calc_basic_amount(2);" id="rate_basic2"></input>
<input onblur="calc_basic_amount(2);" id="qty_basic2"></input>
<input id="basic_amount2"></input>
</div>
function calc_basic_amount(id){
var qty_basic = document.getElementById('qty_basic'+id).value;
var rate_basic = document.getElementById('rate_basic'+id).value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}
https://codepen.io/flakerimi/pen/xxgVpWR
I have simplified a bit but you get the idea.
var table = document.getElementById('myTable');
var rowCount = table.rows.length;
function addRow() {
currentNum = rowCount+1;
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="rate_basic'+currentNum+'" />';
cell2.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="qty_basic'+currentNum+'"/>';
cell3.innerHTML = '<input id="basic_amount'+currentNum+'"/>';
rowCount++;
}
function calc_basic_amount(id){
var qty_basic = document.getElementById('qty_basic'+id).value;
var rate_basic = document.getElementById('rate_basic'+id).value;
var basic_amount = (qty_basic * rate_basic);
document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}
table, td {
border: 1px solid black;
}
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable">
<tr>
<td><input onblur="calc_basic_amount(1);" id="rate_basic1" /></td>
<td><input onblur="calc_basic_amount(1);" id="qty_basic1"/></td>
<td><input id="basic_amount1"/></td>
</tr>
</table>
<br>
<button onclick="addRow()">Create row</button>
<script>
</script>

Related

how to get user entered data and ID's in dynamically added table rows?

How can I get dynamically added rows id's and user entered data? I have created a dynamic table but I don't know how to get the values and dynamically generated id's. Can anyone please help me?
$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
var total = 0;
$('[data-action="sumDebit"]').each(function(_i, e) { //Get all tags with [data-action="sumDebit"]
var val = parseFloat(e.value); //Get int value from string
if (!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
total += val;
});
$('#totaldbt').val(total); //Update value to total
});
var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><select class="form-control" id=' + cashacc + ' ' + FieldCount + '></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' ' + FieldCount + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" data-action="sumDebit" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' ' + FieldCount + '/></td><td style="width: 4%"><img src="./img/delete.svg" class="dlt-icon" ' + FieldCount + '></td></tr>';
$('#cashTable').append(newTr);
$(document).on('click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row" class="jsrow">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control narate" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" data-action="sumDebit" value="100" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td class="tblBtn" style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon dlt-icon">
</td>
</tr>
</tbody>
</table>
FIDDLE Here..
What do you mean by ids?? on what action you would want user data and ids of dynamically created rows.
Everything is there. You have jsrow enter code hereclass for each tr created. Fetch all tr and then fetch each input value as you have distinct class for each input.
var rows = $('#cashTable').find('tr.jsrow'); // get all rows.
Then iterate rows as per your need. i am writing directly lets say want to get all ids of row 2. Find all inputs under that row as below and then get id attribute.
var inputs = $(rows[0]).find('input'); // all inputs. same way all select as well
// iterate all inputs and grab ID attribute
for(let i =0 ; i< inputs.length; i++ ) {
var attr = inputs[i].getAttribute('id');
console.log(attr); // id attribute
console.log(inputs[i].value); // value
}
You can get user input by referring to the column and row inside a table
var table = document.getElementById("cashTable"), sumVal = 0;
for(var i = 1; i < table.rows.length; i++)
{
sumVal = sumVal + parseFloat(table.rows[i].cells[5].innerHTML);
//here cells is referred to the cell number you want the value if you want the value of all cells of a row then loop through the cells of a row
}
alert(sumVal);
console.log(sumVal);

Table data disappearing upon live search

I am generating dynamic textboxes on button click in a table.
On button click i am calling Details() which appends a new row to the table:
function Details(id,name)
{
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_id[]" value="'+ id +'" class="form-control item_id" autofocus required /></td>';
html += '<td><input type="text" name="item_name[]" value="'+ name +'" class="form-control item_name" required /></td>';
html += '<td style="text-align:center"><button type="button" name="remove" class="btn btn-danger btn-sm order_item_remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$("#table").append(html);
}
But when i try to live search the data from the table then its rows disappear.
Live Search:
$("#search_field").keyup(function() {
var count = 0;
var value = this.value.toLowerCase().trim();
$("#table").find("tr").each(function(index) {
if (index === 0) return;
var id = $(this).find("td").text().toLowerCase().trim();
$(this).toggle(id.indexOf(value) !== -1);
if(id.indexOf(value) !== -1){
count = count+1;
}
});
});
Table:
<table class="table table-bordered" id="table">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</table>
What am i doing wrong?? Any help would be appreciated.
You can use this (edited to use non-ES6 syntax):
var rowMatches = $(this)
.find(':input')
.toArray()
.some(function(input) { return $(input).val().toLowerCase().trim().indexOf(value) !== -1; });
$(this).toggle(rowMatches);
Explanation
.text() is not meant to grab input vales.
You need to use .val(). But since there can be multiple inputs per rows, you want to check whether at least one cell matches the filter.
.toArray() transforms the set of nodes into an array,
Array#some returns true if at least one cell's value matches the filter string.
Demo using the rest of your code
$("#search_field").keyup(function() {
var count = 0;
var value = this.value.toLowerCase().trim();
$("#table").find("tr").each(function(index) {
if (index === 0) return;
var rowMatches = $(this)
.find(':input')
.toArray()
.some(function(input) { return $(input).val().toLowerCase().trim().indexOf(value) !== -1; });
$(this).toggle(rowMatches);
if (rowMatches) {
count = count + 1;
}
});
});
function Details(id, name) {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_id[]" value="' + id + '" class="form-control item_id" autofocus required /></td>';
html += '<td><input type="text" name="item_name[]" value="' + name + '" class="form-control item_name" required /></td>';
html += '<td style="text-align:center"><button type="button" name="remove" class="btn btn-danger btn-sm order_item_remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$("#table").append(html);
}
Details(1, 'foo');
Details(2, 'bar');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</table>
<input id="search_field" placeholder="Filter"/>

Add a blank row in HTML Table

I have an HTML table that adds a new row below where the button in current row is located. Currently when the row is created it generates a clone of the row above including the data. I would like this to be a row that has no entry for the input values rather than a clone of the values above.
Javascript
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
}
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
after you add a row, you can just set the values of all inputs in that row to "". get all the inputs of type text using tr.querySelectorAll("input[type='text']") and using a loop set values of all to ""
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
var inputs = tr.querySelectorAll("input[type='text']");
for(var i=0; i<inputs.length; i++)
inputs[i].value = "";
}
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
You can do this very easily with jQuery:
var $lastRow = $("table#Table tr:last-child");
var $newRow = $lastRow.clone()
$newRow.find("input[type=text]").val(''); //empty all the values in text inputs
$("table#Table").append( $newRow );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
Add this line of code to your function to empty values in HTML code:
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
tr.innerHTML = tr.innerHTML.replace(/value='.*'/, "value=''"); //this will remove all values from your html
tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
}
Using JQuery:
function addRow(){
var t = $("#Table tr").last().clone();
t.find("input").each(function(i,element) {
$(element).val("");
});
t.appendTo("#Table");
}
I can suggest you do this - define table rows in javascript and add those directly. Also, use th for table headers
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
// get elements
var measured = document.getElementById("measured_row" + no);
var inclination = document.getElementById("inclination_row" + no);
var azimuth = document.getElementById("azimuth_row" + no);
// get their values
var measured_data = measured.innerHTML;
var inclination_data = inclination.innerHTML;
var azimuth_data = azimuth.innerHTML;
// replace by editable input tags
measured.innerHTML = "<input type='text' id='measured_text" + no + "' value='" + measured_data + "'>";
inclination.innerHTML = "<input type='text' id='inclination_text" + no + "' value='" + inclination_data + "'>";
azimuth.innerHTML = "<input type='text' id='azimuth_text" + no + "' value='" + azimuth_data + "'>";
}
function save_row(no) {
// same as in edit function
var measured_val = document.getElementById("measured_text" + no).value;
var inclination_val = document.getElementById("inclination_text" + no).value;
var azimuth_val = document.getElementById("azimuth_text" + no).value;
document.getElementById("measured_row" + no).innerHTML = measured_val;
document.getElementById("inclination_row" + no).innerHTML = inclination_val;
document.getElementById("azimuth_row" + no).innerHTML = azimuth_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_measured = document.getElementById("new_measured").value;
var new_inclination = document.getElementById("new_inclination").value;
var new_azimuth = document.getElementById("new_azimuth").value;
var table = document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='measured_row" + table_len + "'>" + new_measured + "</td><td id='inclination_row" + table_len + "'>" + new_inclination + "</td><td id='azimuth_row" + table_len + "'>" + new_azimuth + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_measured").value = "";
document.getElementById("new_inclination").value = "";
document.getElementById("new_azimuth").value = "";
}
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Measured Depth</th>
<th>Inclination</th>
<th>Azimuth</th>
</tr>
<tr id="row1">
<td id="measured_row1">339</td>
<td id="inclination_row1">0.540000021</td>
<td id="azimuth_row1">310.7200012</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr>
<td><input type="text" id="new_measured"></td>
<td><input type="text" id="new_inclination"></td>
<td><input type="text" id="new_azimuth"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>

Adding row dynamically - append row from above

<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>
<input type="text" name="item[]" id="11" />
</td>
<td>
<input type="text" name="recommendations[]" id="12" />
</td>
<td>
<input type="text" name="importance[]" id="13" />
</td>
<td>
<input type="text" name="quantity[]" id="14" />
</td>
</tr>
</table>
add row
http://jsfiddle.net/yKjuw/283/
I have been going through most of these questions and as I have no idea what I am doing. Using the fiddle above you can see the name attribute amends to to ID of the FIRST table td. I need the name of each column to remain the same going down. I tried to add other variables with td:second td:third but the function failed to work at all. Can anyone assist?
You can get the name of the input based on the last row and index of current input element like
function addTableRow(jQtable) {
var $row = jQtable.find("tr:last"),
$inputs = $row.find('input');
var lastId = $row.find("td:first input").attr("id");
var newId = parseInt(lastId) + 10;
var row = $('<tr />');
for (var i = 0; i <= 2; i++) {
var thisId = newId + i;
var cell = $('<td />');
var label = $('<label for="' + thisId + '">' + thisId + '</label>');
var input = $('<input type="text" name="' + $inputs.eq(i).attr('name') + '" id="' + thisId + '" />');
cell.append(label, input);
row.append(cell);
}
row.append('<td>del</td>');
jQtable.append(row);
}
Demo: Fiddle
You can use .clone() to simplify this
function addTableRow(jQtable) {
var $row = jQtable.find("tr:last"),
$clone = $row.clone().appendTo(jQtable);
$clone.find('[id]').attr('id', function(i, id) {
return 10 + +id;
});
$clone.find('label').remove();
$clone.find('input').each(function() {
$(this).before('<label for="' + this.id + '">' + this.id + '</label>')
})
}
Demo: Fiddle
Or this: Fiddle
Use clone, its simple. jQuery clone
function addTableRow(e) {
var row = $('#mans tr:last');
row = row.clone(true);
row.find('>td>input').each(function(){
var t = $(this), id = t.attr('id'), new_id = id*1+10;
t.attr('id',new_id);
});
$('#mans').append(row);
}
function removeRow(e){
e.preventDefault();
$(this).parents('tr').remove();
}
$(function () {
$('#addRow').on('click', addTableRow);
$('table tr>td>a').on('click', removeRow);
});

Calling Javascript to make HTML that can be used by different Javascript file

Current situation:
Have a timesheet that allows the user to enter their leave, TOIL, Sick which totals the hours.Have a table that creates a new row everytime the plus button is pressed. Using the following
Table Creates & Removes rows
function CreateNewRow(num, str) {
var intLine = parseInt(document.frmMain.hdnMaxLine.value);
intLine++;
var theTable = document.getElementById("tbExp");
var newRow = theTable.insertRow(theTable.rows.length)
newRow.id = newRow.uniqueID
var newCell
//*** ID Column ***//
newCell = newRow.insertCell(0);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = num;
//*** Column 1 ***//
newCell = newRow.insertCell(1);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
//newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"10\" NAME=\"Column1_"+intLine+"\" ID=\"Column1_"+intLine+"\" VALUE=\"\"></center>";
newCell.innerHTML = str;
//*** Column 2 ***//
newCell = newRow.insertCell(2);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><SELECT NAME=\"Column5_"+intLine+"\" ID=\"Column5_"+intLine+"\"></SELECT></center>";
//*** Column 3 ***//
newCell = newRow.insertCell(3);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_" + intLine + "\" ID=\"Column4_" + intLine + "\" VALUE=\"\"></center>";
//*** Create Option ***//
CreateSelectOption("Column5_" + intLine)
document.frmMain.hdnMaxLine.value = intLine;
}
function RemoveRow() {
intLine = parseInt(document.frmMain.hdnMaxLine.value);
if(parseInt(intLine) > 0) {
theTable = document.getElementById("tbExp");
theTableBody = theTable.tBodies[0];
theTableBody.deleteRow(intLine);
intLine--;
document.frmMain.hdnMaxLine.value = intLine;
}
}
Timesheet.js
function updateTotal()
{
var total = 0;
$(".dayinput").map( function() { total += $(this).val() * 8; } );
$(".hourinput").map( function() { total += $(this).val() * 1; } );
$("#total").val( total );
if( total >= 40 )
{
$("#total").removeClass( "total_low" );
$("#total").addClass( "total_ok" );
}
else
{
$("#total").removeClass( "total_ok" );
$("#total").addClass( "total_low" );
}
}
function validateUpdateTotal()
{
if( ($(this).val()-0) != $(this).val() )
{
alert( "Invalid number" );
$(this).val( "" );
}
else
updateTotal();
}
function initPage()
{
$("#project_select").val("");
$("#task_select").val("");
$(".hourinput").val("");
$(".dayinput").val("");
updateTotal();
}
$(".dayinput").change( validateUpdateTotal );
$(".hourinput").change( validateUpdateTotal );
$(document).ready( initPage );
HTML
<fieldset>
<div class="left">
<table>
<tr>
<td>Leave</td>
<td><input class="dayinput" type="text" name="Leave"></td>
</t>
<tr>
<td>TOIL</td>
<td><input class="dayinput" type="text" name="TOIL"></td>
</tr>
<tr>
<td>Sick</td>
<td><input class="dayinput" type="text" name="Sick"></td>
</tr>
<tr>
<td>Total</td>
<td><input id="total" class="total_low" type="text" value="0" disabled="">
</tr>
</table>
</div>
<div class="right">
<b>Projects this week</b><div class = "right"><input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();"></div>
<ul id="task_list">
<form name="frmMain" method="post">
<table width="470" border="1" id="tbExp">
<tr>
<td><div align="center">No.</div></td>
<td><div align="center">Project </div></td>
<td><div align="center">Task </div></td>
<td><div align="center">Hours </div></td>
<td><div align="center"></div></td>
</tr>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
</form>
</ul>
</div>
</fieldset>
I am now trying to use the InnerHTML function to make a HTML textbox that can be used by the timesheet.js table. So that when the user enters their hours it updates both tables.
I tried the following newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"HOURINPUT\" CLASS=\"hourinput\"></center>;
This did not work for me, what is it that I need to do in order to get this working?
The image shown explains what I am trying to do
Updated Image after changes:
//*** Column 3 ***//
newCell = newRow.insertCell(3);
newCell.id = newCell.uniqueID;
newCell.setAttribute("className", "css-name");
newCell.innerHTML = "<center><INPUT CLASS=\"hourinput\" TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_" + intLine + "\" ID=\"Column4_" + intLine + "\" VALUE=\"\"></center>";
Also try changing
$(".hourinput").change( validateUpdateTotal );
to
$(".hourinput").bind('change', validateUpdateTotal);

Categories