调用Javascript来制作可供不同Javascript文件使用的HTML

Question

现状： 有一个时间表，允许用户输入他们的休假，TOIL，Sick，总计小时数。每次按下加号按钮时都会创建一个新行。使用以下

表创建＆amp;删除行

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