您的位置:首页 > 编程语言

动态增删表格中的行【代码片段】

2008-11-21 09:37 267 查看
//----------------为表格添加一个新行----------------//
function tableAdd() {
var newRow;
var rownum = table_elment.rows.length;
newRow=table_elment.insertRow(rownum);
newRow.id="r"+rownum;
newRow.align = "center";
newRow.bgColor="#ffffff";
i++;

var str1='<input type="hidden" id="specialtyid'+rownum+'" name="speaceid" value="${loginer.specialtyId}">'
+'<input type="text" id="specialtyname'+rownum+'" name="specialtyname" value="${loginer.specialtyName}"'
+'onClick="SelectWorkGroup1('+rownum+');"'
+'size="15" readonly/>';

var str2='<input type="hidden" id="depid'+rownum+'" name="depid" value="${loginer.str_DepId}" />'
+'<input type="text" id="depname'+rownum+'" name="depname" value="${loginer.str_DepName}"'
+'onClick="SelectWorkGroup4('+rownum+',/'${loginer.strOpFac}/')"'
+'size="12" readonly />';

newRow.insertCell(0).innerHTML=document.all.div_tdvalue1.innerHTML;
newRow.insertCell(1).innerHTML=document.all.div_tdvalue2.innerHTML;
newRow.insertCell(2).innerHTML=str1;
newRow.insertCell(3).innerHTML=str2;
newRow.insertCell(4).innerHTML=document.all.div_tdvalue3.innerHTML;;
newRow.insertCell(5).innerHTML=document.all.div_tdvalue4.innerHTML;
cell6 = newRow.insertCell(6);
cell6.colSpan = 2;
cell6.innerHTML = document.all.div_tdvalue5.innerHTML;

cont++;
}

// ----------------- 删除当前行 ----------------- //
function tabledel() {
var trIndex = getRowIndex();

table_elment.deleteRow(trIndex);
}

// -------------- 获取当前行的索引 ------------- //
function getRowIndex()
{
try
{
var Elm = event.srcElement;
while(Elm && Elm.tagName != "TR")
{
Elm = Elm.parentElement;
}
var intRowIndex = Elm.rowIndex;
return intRowIndex;
}
catch(ex)
{
alert("getRowIndex() Err 5001:/r/n" + ex);
m_strError += "getRowIndex() Error" + ex;
}
}

......

// -------------- 新增一行的代码示例 ------------- //

<input type="button" class="fm" onclick="tableAdd()"
id="add" value="新增">

// -------------- 删除一行的代码示例 ------------- //

<div id="div_tdvalue5" style="display:none">
<div id="div_del" align="center" style="cursor:hand;display:"
onClick="tabledel();">
删除
</div>
<div id="div_del1" align="center" style="cursor:hand;display:none">
<font color="#cccccc">删除</font>
</div>
</div>

( 该方法适合于删除连接或按钮位于各自行中)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: