Вызов Javascript для создания HTML, который может использоваться другим файлом Javascript

Question

Текущая ситуация: есть расписание, которое позволяет пользователю вводить данные об отпуске, TOIL, Sick, которые составляют часы. Имеют таблицу, которая создает новую строку при каждом нажатии кнопки «плюс».Использование следующих

Таблица создает и удаляет строки

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>

Сейчас я пытаюсь использовать функцию InnerHTML для создания текстового поля HTML, которое может использоваться таблицей timesheet.js.Так что, когда пользователь вводит свои часы, он обновляет обе таблицы.

Я попробовал следующее newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"HOURINPUT\" CLASS=\"hourinput\"></center>; Это не сработало для меня, что мне нужно сделать, чтобы это работало?

Показанное изображение объясняет, что я пытаюсь сделать

Обновленное изображение после изменений:

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>";

Также попробуйте изменить

$(".hourinput").change( validateUpdateTotal );

на

$(".hourinput").bind('change', validateUpdateTotal);