動態 Table 添加刪除行

<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

發佈了16 篇原創文章 · 獲贊 1 · 訪問量 8119

私信關注

動態 Table 添加刪除行

Wireshark 安裝+使用（一）

益智小遊戲

Rome wasn't built in a day

js 電子郵件驗證

SQL從一個服務器裏的數據導入另一個服務器

漢洛塔算法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結