調用Javascript制作可被其他Javascript文件使用的HTML

Question

當前情況：有一個時間表，允許用戶輸入自己的假期（TOIL，病假）來累計小時數。有一個表格，每當按下加號按鈕時就會創建新的一行。 使用以下

表創建和刪除行

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