同时兼容IE和FireFox的事件处理event代码--添加文件上传例子
一、向指定的table中插入tr和td
1. insertRow
insertRow() 方法用于在表格中的指定位置插入一个新行。
语法
tableObject.insertRow(index)
返回值
返回一个 TableRow,表示新插入的行。
说明
该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。 如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。
抛出
若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
2. insertCell
定义和用法
insertCell()方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
语法
tablerowObject.insertCell(index)返回值 一个 TableCell 对象,表示新创建并被插入的 <td> 元素。
说明
该方法将创建一个新的 <td> 元素,把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。 请注意,该方法只能插入 <td> 数据表元。若需要给行添加头表元,必须用 Document.createElement() 方法和 Node.insertBefore() 方法(或相关的方法)创建并插入一个 <th> 元素。
抛出
若参数 index 小于 0 或大于等于行中的的表元数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
3. deleteRow
deleteRow() 方法用于从表格删除指定位置的行。
二、事件event在IE和FireFox中的兼容性问题
问题详细描述:
可写成如下三种方式:
① 传入event参数
function testEvent(evt) { evt = evt ? evt : (window.event ? window.event :null);alert(evt); } <input type="button" value="测试event" onclick="javascript:testEvent(event)"/>
var evt = window.event || arguments.callee.caller.arguments[0]; //获取event对象
function getEvent(){ if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null; } var evt = getEvent();// 获取event对象
<script type="text/javascript" src="js/multipleUpload.js"></script> <script type="text/javascript"> function save() { var the_inputs = document.getElementsByTagName("input");// 获取所有input的标签 for(var n=0; n<the_inputs.length; n++){ if(the_inputs[n].type == "file"){ if(the_inputs[n].value == "") { alert("附件不能为空!"); return false; } } } } function testEvent(evt) { evt = evt ? evt : (window.event ? window.event : null); alert(evt); } </script>
<tr>
<td>
<label for="_control_file" class="dialog_label">附件:</label>
<div id="fileDiv" >
<table id="conditionTable" class="sort-table" ></table>
</div>
<a href="javascript:void(0);" onclick="addFile();" class="file">添加附件</a>
</td>
</tr>
<tr>
<td><input type="button" class="button" name="saveForm" value="保存" onClick="save()"/></td>
<td><input type="button" class="button" value="测试event" onClick="javascript:testEvent(event)"/></td>
</tr>
/* 向指定的table中插入tr和td */ var i = 0; function addFile() { i++; currRow=document.getElementById('conditionTable').insertRow(0);// 在表格的开头插入一个新行 cellc=currRow.insertCell(0);// 表的一行的指定位置插入一个空的 <td> 元素 cellcContext="<input type='file' id='file_com' contentEditable='false' name='file(" + (i - 1) + ")' size='65'> <button onclick='javascript:removeFile(event);'>删除</button><br>"; cellc.innerHTML=cellcContext; // onclick='removeFile();' } function findTD(o) { if (o.tagName=="TR" || o.tagName=="TABLE") // event.srcElement.tagName捕获活动标记名称 return; if (o.tagName=="TD") return (o); else return (o.parentElement);// 鼠标所在对象的上一个对象 } function removeFile(evt) { evt = evt ? evt : (window.event ? window.event : null);// 传event参数(方法一) //var evt=window.event || arguments.callee.caller.arguments[0]; // 不传event参数(方法二) //var evt=getEvent();// 获取event对象(方法三) var element=evt.srcElement || evt.target;// FF中的event有这个target属性 o=findTD(element); document.getElementById('conditionTable').deleteRow(o.parentElement.rowIndex * 1); } function getEvent(){ //同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null; }