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

最新推荐文章于 2018-06-05 15:58:04 发布

wen5566

最新推荐文章于 2018-06-05 15:58:04 发布

阅读量112

点赞数

分类专栏： JavaScript 文章标签： HTML

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!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='#' οnclick='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='#' οnclick='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>

wen5566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
增加,删除表格行的js操作

New Document function addTR(){ var imguptb = document.getElementById("imguptb"); var index = getseq(); var row = imguptb.insertRow(); //添加选项框 ...
复制链接

扫一扫

专栏目录