动态 Table 添加删除行

最新推荐文章于 2021-01-19 14:34:38 发布

iteye_10211

最新推荐文章于 2021-01-19 14:34:38 发布

阅读量93

点赞数

分类专栏：技术学习文章标签： J#

技术学习专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>abc</title>
<style type="text/css">
.brungrundColor {background-color:#DAA520;}
.fontSizeB {font-family:Verdana,Arial; font-size: 9pt;}
.borderClass {border-top:1px solid #cfcfcf;border-right:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;font-family:Verdana,Arial; font-size: 10pt;}
.clsBtn2w { MARGIN-RIGHT: 1px; BACKGROUND-IMAGE: url(../exclInputDemo/btngnd2c.gif); WIDTH: 46px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 22px; BORDER-BOTTOM-STYLE: none }
.clsBtn4w { MARGIN-RIGHT: 1px; BACKGROUND-IMAGE: url(../exclInputDemo/btngnd4c.gif); WIDTH: 68px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 22px; BORDER-BOTTOM-STYLE: none }
</style>
<SCRIPT src="../exclInputDemo/setday.js"></SCRIPT>
<SCRIPT language="javascript">
var curSrc=null;
function EditCell(){
var i=0,j=0;
var wid=0;
var Val='';
var Scr=event.srcElement; // 当前元素

if(Scr.tagName=="TD")
{
wid=Scr.clientWidth-3; // 列宽度

Val=Scr.innerHTML;
Scr.innerHTML="<input id='InputText' style='border:0px none; BACKGROUND-COLOR: transparent;#3399FF; height:14px;font-family:宋体;font-size:12px;color:#000000' οnblur='return CellOut()' type='text' name='T1' size='10' "+(wid==0?"":"style='width:"+wid+"'") +" Value='" +MyTable.rows[i].cells[j].innerText+"'>";

InputText.value=Val;

curSrc=Scr;
Scr.children[0].focus();
}
}
function CellOut()
{
var Scr=event.srcElement;
var Val='';
if(curSrc)
{
Val=Scr.value;
curSrc.innerHTML=Val;
}

}

window.onload = function(){
//var pid = "PIAN200862292100000066";
var div1 = document.getElementById("div1");
if(pid == ""){
div1.style.display="";
}else{
div1.style.display="none";
}

}
</SCRIPT>
</head>
<body>

<div id="div1">
<table style='BORDER-COLLAPSE: collapse' border="0" width="100%" style="font-family:宋体;font-size:14px" cellpadding="0" cellspacing="0">
<tr height="22" class="brungrundColor">
<td style="border:1px solid #cfcfcf">保险单号</td>
<td class="borderClass">投保单号</td>
<td class="borderClass">起保时间</td>
<td class="borderClass">投保人(或单位)</td>
<td class="borderClass">投保人联系方式</td>
<td class="borderClass">险种</td>
<td class="borderClass">保险金额</td>
<td class="borderClass">保险费率</td>
<td class="borderClass">保单类型</td>
</tr>

<tr>
<td><input type="text" id="1" value="PIAN2009" maxlength="22" size="22"></td>
<td><input type="text" id="2" value="TIAN2009" maxlength="22" size="22"></td>
<td>
<INPUT style="background-color: #999999" id="starttime2" οnclick="setday(this)" size="10" name="starttime" readOnly=true runat="server">
</td>
<td><input type="text" id="4" value=""></td>
<td><input type="text" id="5" value="" size="13"></td>
<td>
<select name="insurantType">
<option value="2" selected>地方政策性补贴</option>
<option value="1">中央政策性补贴</option>
</select>
</td>
<td><input type="text" id="7" value="10000" size="7"></td>
<td><input type="text" id="8" value="6" size="7"></td>
<td>
<select name="type" style="width:60px">
<option value="1" selected>标的</option>
<option value="2">分户</option>
</select>
</td>
</tr>
</table>
</div>

<table id='MyTable' style='BORDER-COLLAPSE: collapse' border="1" style="font-family:宋体;font-size:14px">
<tr row_num="0" class="brungrundColor" height="22">
<td width="4%" noWrap="noWrap"> </td>
<td width="12%" noWrap="noWrap">防疫码</td>
<td width="12%" noWrap="noWrap">内部编码</td>
<td width="8%" noWrap="noWrap">品种</td>
<td width="5%" noWrap="noWrap">蓄龄</td>
<td width="20%" noWrap="noWrap">养殖地点</td>
<td width="10%" noWrap="noWrap">保护姓名</td>
<td width="15%" noWrap="noWrap">身份证号</td>
<td width="8%" noWrap="noWrap">保护联系方式</td>
<td width="15%" noWrap="noWrap">备注</td>
</tr>
<tr row_num="1">
<td width="4%" οnclick="return del();"><font size="2" color="red">删除</font></td>
<td width="12%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)"">200956100145200 </td>
<td width="12%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)"">WFY001 </td>
<td width="8%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)"">约克夏 </td>
<td width="5%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)"">34 </td>
<td width="20%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)"">北京市房山区蘑菇村 </td>
<td width="10%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)">李宝善 </td>
<td width="15%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)">110020529153681100 </td>
<td width="8%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)">13888888888 </td>
<td width="15%" class="fontSizeB" noWrap="noWrap" OnClick="return EditCell(),add(parseInt(1)+1)">其他 </td>
</tr>
</table>
<table>
<tr><td align="center"><font color="red" size="2">* 录入完成后请点击“确定完成”按钮,否则本次录入将作废 </font><input class="clsBtn4w" type="button" value="确定完成"/></td></tr>
</table>



<script>
var row_num;
var table = document.getElementById('MyTable');

function add(){

var x=document.getElementById('MyTable').rows;
var index = x.length;
var y=x[index-1].cells; // 得到列

newRow = table.insertRow(index); //插入行

// newRow.row_num = "" + index;
var tmpStr;
for(var s=0;s<y.length;s++){

tmpStr = newRow.insertCell();
if(s==0){ //第一列显示删除

//tmpStr.innerText="删除";

tmpStr.innerHTML = "<input class='clsBtn2w' type='button' name='btn' value='删除'/>";

tmpStr.style.fontSize="10pt";
tmpStr.style.color="red";

}else{
tmpStr.style.fontSize="10pt";
}

}

var sms=x[index].cells;

// 为列添加事件
for (var i=0;i<y.length;i++)
{
if(i>0){
y[i].onclick = Function("return EditCell();");
sms[i].onclick = Function("return EditCell(),add();");
}else{
y[i].onclick = Function("return del();");
sms[i].onclick = Function("return del();");
}
}

row_num = table.rows.length;
//alert(document.getElementById('MyTable').innerHTML);
}

function del(){ // 还有删除最后一行后无法添加下列行（未实现）

table.deleteRow(event.srcElement.parentElement.parentElement.rowIndex);

var x=document.getElementById('MyTable').rows;
var index = x.length;

var y=x[index].cells; // 得到列

newRow = table.insertRow(index); //插入行

//newRow.row_num = "" + index;

for (var i=0;i<y.length;i++)
{
if(i>0){
y[i].onclick = Function("return add();");
}else{
y[i].onclick = Function("return del();");
}
}

row_num = table.rows.length;
//alert(document.getElementById('MyTable').innerHTML);
}
</script>
</body>
</html>

iteye_10211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态 Table 添加删除行

abc .brungrundColor {background-color:#DAA520;} .fontSizeB {font-family:Verdana,Arial; font-size: 9pt;} .borderClass {border-top:1px solid #cfcfcf;border-right:1px solid #...
复制链接

扫一扫

专栏目录