[英]Calling Javascript to make HTML that can be used by different Javascript file
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. 当前情况:有一个时间表,允许用户输入自己的假期(TOIL,病假)来累计小时数。有一个表格,每当按下加号按钮时就会创建新的一行。 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 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 的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. 我现在正尝试使用InnerHTML函数来制作可由timesheet.js表使用的HTML文本框。 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? 我尝试了以下
newCell.innerHTML = "<center><INPUT TYPE=\\"TEXT\\" SIZE=\\"5\\" NAME=\\"HOURINPUT\\" CLASS=\\"hourinput\\"></center>;
这样对我不起作用,为了使它起作用我需要做什么?
The image shown explains what I am trying to do 所显示的图像说明了我要做什么
Updated Image after changes: 更改后更新了图像:
//*** 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.