調用Javascript來製作可以被不同的Javascript文件使用的HTML

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函數來製作可供timesheet.js表使用的HTML文本框。所以當用戶輸入他們的時間時，它會更新兩個表。

我試過以下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);