导语

最近公司很多人要填加班申请，但是由于公司的加班申请是网页版，而且需要填写的信息比较繁琐、重复，所以就想到了使用简单的Javascript，来完成这项工作，节省大家的时间。毕竟程序员嘛，总会想偷懒的。

一、所需填写的信息

1. 加班理由
2. 加班日期
3. 开始时间
4. 结束时间
5. 加班时长
6. 添加按钮

二、查看源代码

由于该页面对Chrome、Firefox等流行浏览器支持不是很好，就在IE下面进行。

1. 直接按键盘上的F12打开F12 Developer Tools，并切换到DOM Explorer选项卡下面。（更多关于DOM和Javascript教程，请移步JavaScript HTML DOM
2. 点击鼠标选择工具；
3. 到加班申请的页面上对应要填写的位置用鼠标点击以确定它的代码位置，如加班理由的填写框里面；
4. 位置确定后我们就可以在DOM Explorer里面看到对应的代码id="textareaOTReason"了。

如图

重复上面第二找到所需填写的信息所对应的id，然后进行下一步。

三、编写Javascript代码

function add_OT(textOTDate) {
    document.getElementById('textareaOTReason').value = "I'm forced to OT";
    document.getElementById('textOTDate').value = textOTDate;
    document.getElementById('DropdownlistTimeFromHour').options[18].selected = true;
    document.getElementById('DropdownlistTimeToHour').options[19].selected = true;
    document.getElementById('textboxApplicableHours').value   = "1";
    GridInsertRow('grid');UpdateChinaLeaveHour();
}

下面稍微解释一下上面代码：

function *function_name*(*function parameters*){}

这里定义一个方法，以后可以重复调用，并传入参数“加班日期”。因为我大部分的加班理由、起止时间、加班时长都是一样，我就直接硬编码进去。
大家如果有需要可以改成参数，并相应调整代码。

document.getElementById.value

1. document是Javascript把浏览器加载的HTML文档解析成document对象，我们访问document就可以说访问了整个HTML页面。
2. document.getElementById是通过document获取元素节点的方法之一，这里通过元素节点的id属性来获取元素节点，如textareaOTReason可以获取id为textareaOTReason的元素节点。
3. 我们还可以通过document.getElementsByName()、document.getElementsByTagName()来获取带有指定名称的对象集合、返回带有指定标签名的对象集合。
4. 获取到元素节点后，我们通过为该节点的元素属性value赋值来填写我们原来在页面上需要录入的信息。

document.getElementById('DropdownlistTimeFromHour').options[18].selected

.options[18]：当我们获取到的元素节点是下拉列表的时候，我们需要特殊处理。option[*n*]是指列表中的第十八个；
selected:把true设置给这个属性，说明我们选中的下拉列表的第十八个。

GridInsertRow('grid');UpdateChinaLeaveHour();

该方法是原来我们点击添加加班申请会调用的方法，这里直接重用。

四、重复调用方法add_OT

1. 切换到F12 Developer Tools中的Console选项卡，把我们上面写的script贴进去跑；
2. 调用add_OT('06/01/2016');
3. 到页面查看实际情况。