Question

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:

Answer 1

//*** 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);