一、向指定的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中的兼容性问题
问题详细描述:
window.event无法在firefox上运行W3C不支持windows.event。
解決方法:
可写成如下三种方式:
① 传入event参数
function testEvent(evt) {
evt = evt ? evt : (window.event ? window.event :null);alert(evt);
}
<input type="button" value="测试event" onclick="javascript:testEvent(event)"/>
②不传event参数
var evt = window.event || arguments.callee.caller.arguments[0]; //获取event对象
③ 自定义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对象
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性
三、添加文件上传例子
upload.html
<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>
multipleUpload.js
/* 向指定的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;
}
分享到:
相关推荐
很多时候,在浏览网页时,我们需要考虑用户不小心时关闭窗口的情况,特别是当用户有很重要的数据还没有保存,我们的...这样当用户按了关闭按钮时,便会弹出如下这个窗口(这个是兼容IE和firefox的): 其中”Hello
Firefox下,只能使用document.formName.elements[“elementName”]. 解决方法:统一使用document.formName.elements[“elementName”]. 2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用...
代码如下:[removed]=function(e){ var e=window.event||e; var element=e.srcElement||e.target; if(e.keyCode==13&&element.type!=”submit”&&element.type!=”button”&&element.type!=”textarea”&&element....
DTD是"有效XML文档"的必须文件,我们通过DTD文件来定义文档中元素和标识的规则及相互关系。如何建立一个DTD文件呢?让我们一起来学习: 1.设置元素 元素是XML文档的基本组成部分。你要在DTD中定义一个元素,然后...
看例子: 运行代码框<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> &...
js: 代码如下:function bubufx_enterpress(e) { var keynum; if (window.event) // IE { keynum = e.keyCode... } else if (e.which) // Netscape/Firefox/Opera { keynum = e.which; } if (keynum == 13) { soJS()
Compact - around 13kb after gzipping 兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它) Works on any mainstream browser - (IE 6+, Firefox 2+, Chrome, Safari, others) 采用行为驱动开发 - ...
如果是IE浏览器则执行else里面的语句,即使用event来引用“事件对象”。 这是为了兼容两个浏览器而使用的if判断方法,来使用事件对象。 domObj.onkeydown = function(e){ var oevent = e||event; oevent.…… }...
1.在IE9+、Chrome、Firefox、Opera以及Safari中 window.innerHeight获取浏览器窗口的内部高度 window.innerWidth获取浏览器窗口的内部宽度 var msg = "窗口宽度:" + window.innerHeight + "\n窗口高度:" + ...