表格中用js左右添加从下拉列表中选择的内容
2006-08-07 18:01
781 查看
<html>
<HTML>
<HEAD>
<TITLE>
Ultra NMS Portal
</TITLE>
</HEAD>
<script language="javascript">
function test(sel_source,groupE){
var province=sel_source.options[sel_source.selectedIndex].text;
var group=groupE.options[groupE.selectedIndex].text;
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++){
var row=myTable.rows[i];
var cell1=row.cells[0];//province
var cell2=row.cells[1];//group
var cell3=row.cells[2];//usr
if(cell1.innerText!=province)
continue;
else
{
var rowspan=cell1.rowSpan;
for(var j=0;j<rowspan;j++)
{
row=myTable.rows[i+j]
if(rowspan==1 || row.cells.length==4)
cell2=row.cells[1];//group
else
cell2=row.cells[0];//group
if(cell2.innerText==group)
return;
}
var addrow=myTable.insertRow(i+rowspan);
addrow.id="2"+","+province+","+group;
cell1.rowSpan=rowspan+1;
addrow.insertCell(0).innerText=group;
addrow.insertCell(1).innerText=" ";
addrow.insertCell(2).innerHTML="<button id='"+"2"+","+province+","+group+"'onclick='delTestRow(id)'>删除</button>";
return;
}
}
var row1=myTable.insertRow(1);
row1.id="2"+","+province+","+group;
row1.insertCell(0).innerText=province;
row1.insertCell(1).innerText=group;
row1.insertCell(2).innerText=" ";
row1.insertCell(3).innerHTML="<button id='"+"2"+","+province+","+group+"'onclick='delTestRow(id)'>删除</button>";
}
function delTestRow(delid){
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
var spanrow;
var rowspan;
for(var i=0;i<aa;i++){
var row=myTable.rows[i];
var collen=row.cells.length;
if(collen==4){
spanrow=i;
rowspan=row.cells[0].rowSpan;
}
if(row.id==delid){
if(collen==4)
{
if(rowspan==1)
myTable.deleteRow(i);
else
{
var nextrow=myTable.rows[i+1];
nextrow.insertCell(0).innerText=row.cells[0].innerText;
nextrow.cells[0].rowSpan=row.cells[0].rowSpan-1;
myTable.deleteRow(i);
}
}
else
{
myTable.deleteRow(i);
myTable.rows[spanrow].cells[0].rowSpan=rowspan-1;
}
return;
}
}
}
function testtest(sel_source,userElement)
{
var province=sel_source.options[sel_source.selectedIndex].text;
var user=userElement.options[userElement.selectedIndex].text;
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++)
{
var row=myTable.rows[i];
var provinceCell=row.cells[0];//province
var userCell;//
if(provinceCell.innerText!=province)
continue;
else
{
var rowspan=provinceCell.rowSpan;
for(var j=0;j<rowspan;j++)
{
row=myTable.rows[i+j]
if(rowspan==1 || row.cells.length==4)
userCell=row.cells[2];//user
else
userCell=row.cells[1];//user
if(userCell.innerText==user)
return;
}
var addrow=myTable.insertRow(i+rowspan);
addrow.id="1"+","+province+","+user;
provinceCell.rowSpan=rowspan+1;
addrow.insertCell(0).innerText=" ";
addrow.insertCell(1).innerText=user;
addrow.insertCell(2).innerHTML="<button id='"+"1"+","+province+","+user+"'onclick='delTestRow(id)'>删除</button>";
return;
}
}
var row1=myTable.insertRow(1);
row1.id="1"+","+province+","+user;
row1.insertCell(0).innerText=province;
row1.insertCell(1).innerText=" ";
row1.insertCell(2).innerText=user;
row1.insertCell(3).innerHTML="<button id='"+"1"+","+province+","+user+"'onclick='delTestRow(id)'>删除</button>";
}
function submittable()
{
var combinestr="";
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++)
{
combinestr+=myTable.rows[i].id+";";
}
document.getElementById("combineStr").value=combinestr;
}
</script>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="document.powersearch.downcontent.focus()">
<form method="post" name="powersearch" onSubmit="javascript:return(checkForm())" action="/uportal/ed/getvalidata.jsp" id="form1">
<table width="768" height="346" border="1" align="center">
<tr>
<td height="130" colspan="4" align="justify">
<table width="875" height="126" border="1" >
<tr>
<td width="97">
<font style="font-size:12px;color:#000080;font-weight:bold;">
省份名称
</font>
</td>
<td height="30" colspan="2">
<SELECT name="hero" id="hero" onChange="Change_Select()">
<option>
请选择
</option>
<option value="总部">
总部
</option>
<option value="湖南分公司">
湖南分公司
</option>
<option value="河北分公司">
河北分公司
</option>
<option value="北京分公司">
北京分公司
</option>
<option value="山东分公司">
山东分公司
</option>
<option value="河南分公司">
河南分公司
</option>
</SELECT>
</tr>
<tr>
<td height="88" bgcolor="#FFFFFF">
<font style="font-size:12px;color:#000080;font-weight:bold;">
小组名称
</font>
</td>
<td width="140" bgcolor="#FFFFFF">
<SELECT name="skill" id="skill" size=6 multiple=true >
<OPTION value="0">
Unbounded
</OPTION>
</SELECT>
</td>
<td width="46" bgcolor="#FFFFFF">
<table width="46" border="0">
<tr>
<td width="40" height="36">
<button onclick="test(hero,skill)">
添加
</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td width="364" bgcolor="#FFFFFF">
<table width="364" height="31" border="1" id="testtable">
<tr>
<td width="67" height="25">
<font style="font-size:12px;color:#000080;font-weight:bold;">
省分名称
</font>
</td>
<td width="82">
<font style="font-size:12px;color:#000080;font-weight:bold;">
小组名称
</font>
</td>
<td width="88">
<font style="font-size:12px;color:#000080;font-weight:bold;">
人员门名称
</font>
</td>
<td width="84" colspan="3">
<font style="font-size:12px;color:#000080;font-weight:bold;">
删除操作
</font>
</td>
</tr>
</table>
</td>
<td width="50" bgcolor="#FFFFFF">
<table width="46" border="0">
<tr>
<td width="40" height="36">
<button onclick="testtest(hero,skill2)">
添加
</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td width="87" bgcolor="#FFFFFF">
<SELECT name="skill2" id="skill2" size=6 multiple=true >
<OPTION value="0">
Unbounded
</OPTION>
</SELECT>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
Ultra NMS Portal
</TITLE>
</HEAD>
<script language="javascript">
function test(sel_source,groupE){
var province=sel_source.options[sel_source.selectedIndex].text;
var group=groupE.options[groupE.selectedIndex].text;
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++){
var row=myTable.rows[i];
var cell1=row.cells[0];//province
var cell2=row.cells[1];//group
var cell3=row.cells[2];//usr
if(cell1.innerText!=province)
continue;
else
{
var rowspan=cell1.rowSpan;
for(var j=0;j<rowspan;j++)
{
row=myTable.rows[i+j]
if(rowspan==1 || row.cells.length==4)
cell2=row.cells[1];//group
else
cell2=row.cells[0];//group
if(cell2.innerText==group)
return;
}
var addrow=myTable.insertRow(i+rowspan);
addrow.id="2"+","+province+","+group;
cell1.rowSpan=rowspan+1;
addrow.insertCell(0).innerText=group;
addrow.insertCell(1).innerText=" ";
addrow.insertCell(2).innerHTML="<button id='"+"2"+","+province+","+group+"'onclick='delTestRow(id)'>删除</button>";
return;
}
}
var row1=myTable.insertRow(1);
row1.id="2"+","+province+","+group;
row1.insertCell(0).innerText=province;
row1.insertCell(1).innerText=group;
row1.insertCell(2).innerText=" ";
row1.insertCell(3).innerHTML="<button id='"+"2"+","+province+","+group+"'onclick='delTestRow(id)'>删除</button>";
}
function delTestRow(delid){
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
var spanrow;
var rowspan;
for(var i=0;i<aa;i++){
var row=myTable.rows[i];
var collen=row.cells.length;
if(collen==4){
spanrow=i;
rowspan=row.cells[0].rowSpan;
}
if(row.id==delid){
if(collen==4)
{
if(rowspan==1)
myTable.deleteRow(i);
else
{
var nextrow=myTable.rows[i+1];
nextrow.insertCell(0).innerText=row.cells[0].innerText;
nextrow.cells[0].rowSpan=row.cells[0].rowSpan-1;
myTable.deleteRow(i);
}
}
else
{
myTable.deleteRow(i);
myTable.rows[spanrow].cells[0].rowSpan=rowspan-1;
}
return;
}
}
}
function testtest(sel_source,userElement)
{
var province=sel_source.options[sel_source.selectedIndex].text;
var user=userElement.options[userElement.selectedIndex].text;
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++)
{
var row=myTable.rows[i];
var provinceCell=row.cells[0];//province
var userCell;//
if(provinceCell.innerText!=province)
continue;
else
{
var rowspan=provinceCell.rowSpan;
for(var j=0;j<rowspan;j++)
{
row=myTable.rows[i+j]
if(rowspan==1 || row.cells.length==4)
userCell=row.cells[2];//user
else
userCell=row.cells[1];//user
if(userCell.innerText==user)
return;
}
var addrow=myTable.insertRow(i+rowspan);
addrow.id="1"+","+province+","+user;
provinceCell.rowSpan=rowspan+1;
addrow.insertCell(0).innerText=" ";
addrow.insertCell(1).innerText=user;
addrow.insertCell(2).innerHTML="<button id='"+"1"+","+province+","+user+"'onclick='delTestRow(id)'>删除</button>";
return;
}
}
var row1=myTable.insertRow(1);
row1.id="1"+","+province+","+user;
row1.insertCell(0).innerText=province;
row1.insertCell(1).innerText=" ";
row1.insertCell(2).innerText=user;
row1.insertCell(3).innerHTML="<button id='"+"1"+","+province+","+user+"'onclick='delTestRow(id)'>删除</button>";
}
function submittable()
{
var combinestr="";
var myTable = document.getElementById("testtable");
var aa=myTable.rows.length;
for(var i=1;i<aa;i++)
{
combinestr+=myTable.rows[i].id+";";
}
document.getElementById("combineStr").value=combinestr;
}
</script>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="document.powersearch.downcontent.focus()">
<form method="post" name="powersearch" onSubmit="javascript:return(checkForm())" action="/uportal/ed/getvalidata.jsp" id="form1">
<table width="768" height="346" border="1" align="center">
<tr>
<td height="130" colspan="4" align="justify">
<table width="875" height="126" border="1" >
<tr>
<td width="97">
<font style="font-size:12px;color:#000080;font-weight:bold;">
省份名称
</font>
</td>
<td height="30" colspan="2">
<SELECT name="hero" id="hero" onChange="Change_Select()">
<option>
请选择
</option>
<option value="总部">
总部
</option>
<option value="湖南分公司">
湖南分公司
</option>
<option value="河北分公司">
河北分公司
</option>
<option value="北京分公司">
北京分公司
</option>
<option value="山东分公司">
山东分公司
</option>
<option value="河南分公司">
河南分公司
</option>
</SELECT>
</tr>
<tr>
<td height="88" bgcolor="#FFFFFF">
<font style="font-size:12px;color:#000080;font-weight:bold;">
小组名称
</font>
</td>
<td width="140" bgcolor="#FFFFFF">
<SELECT name="skill" id="skill" size=6 multiple=true >
<OPTION value="0">
Unbounded
</OPTION>
</SELECT>
</td>
<td width="46" bgcolor="#FFFFFF">
<table width="46" border="0">
<tr>
<td width="40" height="36">
<button onclick="test(hero,skill)">
添加
</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td width="364" bgcolor="#FFFFFF">
<table width="364" height="31" border="1" id="testtable">
<tr>
<td width="67" height="25">
<font style="font-size:12px;color:#000080;font-weight:bold;">
省分名称
</font>
</td>
<td width="82">
<font style="font-size:12px;color:#000080;font-weight:bold;">
小组名称
</font>
</td>
<td width="88">
<font style="font-size:12px;color:#000080;font-weight:bold;">
人员门名称
</font>
</td>
<td width="84" colspan="3">
<font style="font-size:12px;color:#000080;font-weight:bold;">
删除操作
</font>
</td>
</tr>
</table>
</td>
<td width="50" bgcolor="#FFFFFF">
<table width="46" border="0">
<tr>
<td width="40" height="36">
<button onclick="testtest(hero,skill2)">
添加
</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td width="87" bgcolor="#FFFFFF">
<SELECT name="skill2" id="skill2" size=6 multiple=true >
<OPTION value="0">
Unbounded
</OPTION>
</SELECT>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习Discuz! X3.2记录：快速回复插件，通过js使选择的下拉列表填充到回帖内容中
- AngulrJS 表格查询-添加-下拉列表-删除的使用
- Jq和JS实现下拉列表左右选择（时间）
- js案例之全选与下拉列表左右选择
- 如何使用js完成下拉列表左右选择
- 下拉列表左右选择(js代码)
- js-案例：下拉列表左右选择分析
- 网页特效|网页特效代码(JsHtml.cn)---左右选择添加删除内容菜单
- js实现-下拉列表左右选择
- js三级地区选择插件，省市县级联下拉列表
- 下拉列表选择判断js
- JS下拉列表交换数据，互相选择代码
- 星座运势-选择下拉列表选项不同，内容的样式不同
- 使用JavaScript以,号分割文本框内容为数组并添加到下拉列表
- 下拉列表的左右选择的实现
- Excel中设置下拉列表的来源怎么选择其他工作表的内容
- JvaScript--使用js添加数据，点击按钮，将内容放入表格中
- AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- HTML下拉列表的左右选择
- JavaScript js 左右移动下拉列表选项