动态表格产生的问题？

grady.lu 2005-04-16 03:23:10
源代码如下：
<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态表格</title>
</head>

<body>

<form method="POST" name="form1">
<script language="javascript">
function AddNew(){
var newRow;
var newCell;
var i=1;
newRow = table1.insertRow();
newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<select size=\"1\" name=\"DrugID"+(table1.rows.length-3)+"\" onchange='selectChange(this.value,table1.rows.length-3)'><option>please chose</option><option value=\"0\">one</option><option value=\"1\">two</option></select>"

newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<input type=\"text\" name=\"T1"+(table1.rows.length-3)+"\" size=\"20\" value=T1"+(table1.rows.length-3)+">"

newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<input type=\"text\" name=\"T2"+(table1.rows.length-3)+"\" size=\"20\">"

alert(table1.rows.length-3);
}
function selectChange(selvalue,id){

var Regions = new Array("one","Tow");

Regions[0]=new Array("湖北省","武汉市");

Regions[1]=new Array("湖北省","咸宁市");
if (selvalue==0){
document.all.item("T1"+id).value= Regions[0][0];
document.all.item("T2"+id).value= Regions[0][1];
}
if (selvalue==1){
document.all.item("T1"+id).value= Regions[1][0];
document.all.item("T2"+id).value= Regions[1][1];
}
}
</script>
<table id=table1 border="1" style="border-collapse: collapse" width="71%" height="70">
<tr>
<td width="164">　</td>
<td width="220">　</td>
<td><input type="button" value="Add" name="B1" onclick="AddNew()"></td>
</tr>
<tr>
<td width="164">one</td>
<td width="220">two</td>
<td>three</td>
</tr>
<tr>
<td width="164"><select size="1" name="DrugID" onchange='selectChange(this.value,0)'>
<option value ="">---please chose---</option>
<option value="0">one</option>
<option value="1">two</option>
</select></td>
<td width="220"><input type="text" name="T10" size="20"></td>
<td><input type="text" name="T20" size="20"></td>
</tr>
</table>
</form>

</body>

</html>
问题：现在该网页没有问题，但我想每生成的新一行里的控件名不能，即与第一行相同，并且也能实现同样的功能，该怎么做？谢谢大家帮忙，想了三天还没有搞定。
...全文
159 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
JK_10000 2005-04-18
  • 打赏
  • 举报
 回复
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>

<style>
TD,INPUT{ font-size:12; }
</style>
</head>

<body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>代码改自：<a href="http://jkisjk.vip.sina.com/html/detailkeep2.htm" target="_blank">JK的动态明细示例</a></h4>

<table align="center" bordercolor=cccccc border=1 width=100% >
<tr>
<td width=500>
</td>
<td align=right>
<input type="button" value="增加" class="bottom" onclick="addDetailProcess();"> 
<input type="button" value="完成" class="bottom" onclick="submitProcess();">

</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
<tr bgcolor=eeeeee id="trDetailTitles">
<td >one</td>
<td >two</td>
<td >three</td>
</tr>

<tbody id="tbDetailUsed" >

<tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
</tbody>

</table>
</div>
</form>

<!--复制的内容-->
<table id="tbDetailPrepare" style="display:none">
<tr>
<td >
<select size="1" name="DrugID" onchange='selectChange(this)'>
<option value ="0">---please chose---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select></td>
<td ><input type="text" name="T1" size="20"></td>
<td><input type="text" name="T2" size="20"></td>
</tr>
</table>


<input name="theHistoryRecord" type=hidden value="">
</body>

</html>


<script language="javascript">

var Regions = new Array("--Please chose---","one","two","three");
Regions[0]=new Array("","");
Regions[1]=new Array("湖北省","武汉市");
Regions[2]=new Array("湖北省","咸宁市");
Regions[3]=new Array("湖北省","襄樊市");

function selectChange(obj){

obj.parentElement.parentElement.all.T1.value=Regions[obj.value][0];
obj.parentElement.parentElement.all.T2.value=Regions[obj.value][1];
}


</script>

<script language=javascript>

window.onload = historyOncemore;
window.onbeforeunload = fixHistory;

function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
}

function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
}


function addDetailProcess(afterRowIndex) //增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (afterRowIndex==null)
{
afterRowIndex=alltbDetailUsed.length-2;
}
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[afterRowIndex+1];
desRow.parentElement.insertBefore(newRow,desRow );

}


function submitProcess()
{
document.frm.submit();
}


</script>
qiqunet 2005-04-16
  • 打赏
  • 举报
 回复


//////////////////////////////////////
/// ///
/// 研究了一会，实现了，如下： ///
/// ///
//////////////////////////////////////




<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态表格</title>
</head>

<body>

<form method="POST" name="form1">
<script language="javascript">
function AddNew(){
var newRow;
var newCell;
var i=1;
newRow = table1.insertRow();
newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<select size=\"1\" name=\"DrugID\" onchange='selectChange(this.value,table1.rows.length-3)'><option>please chose</option><option value=\"0\">one</option><option value=\"1\">two</option></select>"

newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<input type=\"text\" name=\"T1\" size=\"20\" value=T1"+(table1.rows.length-3)+">"

newCell=newRow.insertCell();
newCell.width="164";
newCell.innerHTML="<input type=\"text\" name=\"T2\" size=\"20\">" //添加名字都是相同的文本框。

// alert(table1.rows.length-3);
}
function selectChange(selvalue,id){

var Regions = new Array("one","Tow");

Regions[0]=new Array("湖北省","武汉市");

Regions[1]=new Array("湖北省","咸宁市");

var e=event.srcElement.parentElement.parentNode.rowIndex-3; //获取列表框所在行的行号。

if (selvalue==0){
document.getElementsByName("T1")[e].value= Regions[0][0];//改变与鼠标点击的列表框处于同一行的文本框的值。
document.getElementsByName("T2")[e].value= Regions[0][1];
}
if (selvalue==1){
document.getElementsByName("T1")[e].value= Regions[1][0];
document.getElementsByName("T2")[e].value= Regions[1][1];
}
}
</script>
<table id=table1 border="1" style="border-collapse: collapse" width="71%" height="70">
<tr>
<td width="164">　</td>
<td width="220">　</td>
<td><input type="button" value="Add" name="B1" onclick="AddNew()"></td>
</tr>
<tr>
<td width="164">one</td>
<td width="220">two</td>
<td>three</td>
</tr>
<tr>
<td width="164"><select size="1" name="DrugID" onchange='selectChange(this.value,0)'>
<option value ="">---please chose---</option>
<option value="0">one</option>
<option value="1">two</option>
</select></td>
<td width="220"><input type="text" name="T10" size="20"></td>
<td><input type="text" name="T20" size="20"></td>
</tr>
</table>
</form>

</body>

</html>
qiqunet 2005-04-16
  • 打赏
  • 举报
 回复


你三天都搞不定，看来我也不过差不多

给个建议，你可以给添加的控件加“ID”——名同，ID不同，这样用起来就怎么用都行了。


grady.lu 2005-04-16
  • 打赏
  • 举报
 回复
怎么没人反应啊，急啊
JavaScript实现动态创建表格
使用JavaScript动态创建表格。
ASP.NET利用后台代码动态添加表格行小记
ASP.NET利用后台代码动态添加表格项小记 ​ 最近在看一些关于网站建设的东西，其中包括到了ASP.NET技术，昨晚在利用c#获取到数据库数据后，针对一个问题产生了疑惑：触发点击事件后，我该如何将我获取到的数据动态添加到表格中呢？由于基础比较薄弱，也是反复尝试了一些东西，最后找到了一种简单的方法，在这里记录一下。 前端代码： <body> <form id="form1...
如何实现BootStrapTable的动态表格
BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称：BsTable)，其中columns参数作为表格列的内容存储，我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式：类似下文 columns: { { field: 'Id', title: '编号', ...
【Bug日记】Element UI 动态设置表格高度部分表格不生效问题
【????Bug日记】Element UI 动态设置表格高度部分表格不生效问题 文章目录【:bug:Bug日记】Element UI 动态设置表格高度部分表格不生效问题:beetle: 问题描述:pushpin: 问题定位与问题原因:checkered_flag: 解决办法 ???? 问题描述        最近利用Element UI开...
java生成word 带表格_【java】Freemarker 动态生成word(带图片表格)
1、添加freemarker.jar 到java项目。2、新建word文档。3、将文档另存为xml 格式。4、将xml格式化后打开编辑(最好用notepad，有格式)，找到需要替换的内容，将内容换为变量(${变量名})。5、生成表格，包括动态列和动态行。其中columnList 是List格式的表头数据，datas 是List>格式的全部表格数据。#list>${cell}#list&...
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章