增加,删除表格行的js操作

tw5566

浏览: 458759 次
性别:
来自: 长沙

最近访客更多访客>>

hhhh5597

fantasy0407

wenhaokl

csy1045130240

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" language="javascript">
function addTR(){
var imguptb = document.getElementById("imguptb");

var index = getseq();
var row = imguptb.insertRow();
//添加选项框
cell = row.insertCell();
cell.innerHTML="<input type='checkbox' id='box_"+index+"' name='box_"+index+"' value=''/>";

//添加名称
cell= row.insertCell();
cell.innerHTML="<input name='imgname_"+index+"' class='name_input' id='imgname_"+index+"' type='text' maxlength='20' />"

   //图片预览
    cell= row.insertCell();
    cell.innerHTML=" <div id=\"p_image_"+index+"\" style=\"width:80px; height:60px; border:#000000 solid 1px; text-align:center\"><div style=\"line-height:60px;\">没有图片!</div></div> ";

//添加选择图片
cell= row.insertCell();
cell.innerHTML= "<div id='filediv_"+index+"'><input name='imgfile_"+index+"' id='imgfile_"+index+"' type='file' onpropertychange='try{setImageName(this,"+ index +")}catch(e){}' /></div>";

//添加删除
    cell= row.insertCell();
    cell.innerHTML= "[<a href='#' onclick='deletePic(this);'>删除</a>]";
}

//取得添加的行号(index)
function getseq(){
var imguptb = document.getElementById("imguptb");
var trs_obj ;
var len = imguptb.rows.length-1;

for(var i=0;i<len;i++){
trs_obj = document.getElementById("imgname_"+i);
if(!trs_obj){
return i;
}
}
index_lenth = len+1;
return len;
}

//为图片设置默认名字和图片预览
function setImageName(obj,num){
document.getElementById("image_"+num).innerHTML = "";//图片预览

var p_image_ = document.getElementById("image_"+num);

p_image_.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
p_image_.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj.value;
p_image_.style.width = "80px";
    p_image_.style.height = "60px";

var oImageName;
//oImageName = obj.value.substr(obj.value.lastIndexOf("\\")+1);
   document.getElementById("imgname_"+num).value = obj.value;
}

//删除一行
function deletePic(tr_a){
var imguptb = document.getElementById("imguptb");

if(imguptb.rows.length <= 2) {
alert("只剩一条记录,无法删除");
return;
}
if(!confirm("确认删除该记录吗？")){
return;
}

var trobj = tr_a.parentNode.parentNode;
imguptb.deleteRow(trobj.rowIndex);
}

</script>
</HEAD>

<BODY>
<table id="imguptb">
<thead>
<tr>
<th id="th_select"><input type="checkbox" id="qianxuan"/><label>选择</label></th>
<th>名称</th>
<th>图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="box_0" name="box_0" value=""/></td>
<td><input type="text" name="imgname_0" id="imgname_0" maxlength="20"/></td>
<td> <div id="p_image_0" style="width:80px; height:60px; border:#000000 solid 1px; text-align:center"><div style="line-height:60px;">没有图片!</div></div></td>
<td><div id='filediv_0'><input name="imgfile_0" id="imgfile_0" type="file" onpropertychange='try{setImageName(this,0)}catch(e){}'/></div></td>
<td>[<a href='#' onclick='deletePic(this);'>删除</a>]</td>
</tr>
</tbody>
</table>
<table id="table2"><tr><td><input type="button" id ="addbut" name="addbut" onClick="addTR();" value="增加一行数据"/></td></tr></table>

</BODY>
</HTML>

分享到：

截取字符串长度的js | jquery.基础教程.附带源代码

2009-03-02 15:26
浏览 1885
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论