一个html页面中有一个table，几个text，table从数据库中把值读出来，怎样把table中的值在text显示出来

Posted 2023-05-07

我在table中每行添加了一个radio。选中radio行的数据显示在text中。

你把每个radio所在的TD都加一个不重复的ID，当点这个radio的时候，用脚本获取该TD的文本，然后赋给指定的text框即可。追问

能说的具体点吗，我的table和radio都是用js动态生成的。能给点代码提示吗

追答

比如，你的table有10行，每行有一个TD，那么你给每个TD都分别附一个ID号：id="_01_" 到 id="_10_"，然后把你的radio放在TD里，每个radio分别赋一个ID号：id="_01" 到 id="_10"，当点击这个radio时，设置 onclick="document.getElementById('要赋值的文本框的id').value=document.getElementById(this.id+'_').innerhtml" 或者 onclick="document.getElementById('要赋值的文本框的id').value=document.getElementById(this.id+'_').Text"；
记得id="_01" 的radio要放到 id="_01_" 的TD里，其他的类推。
本功能的关键在于 this.id 的灵活运用，通过获得所点击的 radio的id值，找到该radio所在的 TD 的 id，然后取得该TD的文本值或者html值，所以TD的id要比radio的id多一个下划线，便于区别和通过radio的id取得对应的TD的 id ：this.id+'_' 。说得够详细了吧？明白没？

追问

如果我的table为10*10，有十个text，10个radio，怎样做？

追答

我的天！动点脑子嘛，哥子。
每行有10个TD，那么每行里的TD从第一个起，分别命名为 id=“_10_1” 到 id="_10_10" ,相当于 "_10_"为行公共前缀，后面加上顺序作为每个TD的id。如果你的一行只有一个radio，但要取得这十个TD的文本，那就要用循环了，而不是一句document.getElementById('要赋值的文本框的id').value=document.getElementById(this.id+'_').innerHTML。

onclick="javascript:getText(this.id);"

function getText(id)
var str="";
var i=0;
for(i=1;i<11;i++)
str=str+"#"+document.getElementById(id+'_'+i).innerHTML

alert(str);
document.getElementById(id+'#').value=str;


需要的值都取得了，怎么分别对应赋给那十个文本框，很简单了吧？例如那十个文本框的id分别设置为：id="_01#" 到 id="_10#" ，
修改如下：
alert(str);
document.getElementById(id+'#').value=str;
欧了。
给分。

参考技术A 楼上哥们亮了

用js控制table 实现页面出现几个相同的table

页面上有个text文本框 在里面输入一个数字 例如5
下面就会出现5个相同table 3行1列
3行分别放两个text 和一个textarea
就是这样

下面代码基本按照你的格式来的，键盘抬起 0.5 秒后添加 table。更改 max = 14 设置最大天数，style 自己调整。

每一个 table 有一个 id：day1, day2, day3...

每一个景点 input 有一个 name，location1, location2, location3...

每一个住宿 input 有一个 name，hotel1, hotel2, hotel3...

每一个行程  textarea 有一个 name，schedule1, schedule2, schedule3...

<style type="text/css">
#days color: #c00; font-weight: bold; text-align: center;
input[type=text], textarea background: #f8fefe;
textarea width: 100%; height: 200px;
table margin-bottom: 10px;
</style>

<script type="text/javascript">
window.onload = function()
var max = 14,
timer = null,
days = document.getElementById("days"),
tables = document.getElementById("tables");
days.onkeyup = function()
clearInterval(timer);
timer = setTimeout(function()
var days_num = parseInt(days.value);
if(days_num >= 1 && days_num <= max)
tables.innerHTML = "";
for(var i = 1; i <= days_num; i++)
var table = document.createElement("table");
table.id = "day" + i;
table.style.width = "100%";

var tr1 = table.insertRow(-1),
td = tr1.insertCell(-1);
td.style.width = "1%";
td.style.whiteSpace = "nowrap";
td.innerHTML = "第" + i + "天景点：";
(tr1.insertCell(-1)).innerHTML =
\'<input type="text" name="location\' + i + \'" />\';

var tr2 = table.insertRow(-1);
(tr2.insertCell(-1)).innerHTML = \'用餐：\';
(tr2.insertCell(-1)).innerHTML = \'早餐\';

var tr3 = table.insertRow(-1);
(tr3.insertCell(-1)).innerHTML = \'住宿：\';
(tr3.insertCell(-1)).innerHTML =
\'<input type="text" name="hotel\' + i + \'" />\';

var tr4 = table.insertRow(-1);
(tr4.insertCell(-1)).innerHTML = \'行程：\';
(tr4.insertCell(-1)).innerHTML =
\'<textarea name="schedule\' + i + \'" /></textarea>\';

tables.appendChild(table);


else
alert("请输入 1 - " + max + " 之间的数值");

, 500);
;
;
</script>

<p>行程天数：<input id="days" type="text" size="4" value="" /> 天</p>
<div id="tables"></div>

追问

大哥 膜拜啊
呢我要是获取他们的值 就通过id 像 day1 day2 day3 就可以了是吗

追答

你的这个 form 是要通过正常 post 提交还是通过 ajax?

如果是正常 post，在后台就直接得到 location1, location2...schedule3...这样的 post 变量

如果是继续在 Javascript 中操作，

第 24 行改为：'';
第 33 行改为：'';
第 38 行改为：'';

也就是都加了一个 class，注意前面有个下划线，这样不会与 CSS 冲突。

然后遍历可以得到每一个值

var locations = document.getElementsByClassName("_location");
for(var i = 0; i < locations.length; i++)
alert(locations[i].value);


id 只是每个 table 的 id，在 input 和 textarea 中加 id 没有什么意义。

追问

额 弱弱的问一下 这个段遍历的代码 加在哪啊
我试了好久 都没反应
还有 我如果要把 呢个testarea换成fckeditor的 应该怎么做
麻烦你了 无以为报 只有给你加分了

追答

当你需要取得数值的时候就加上这段 for 代码

换成 fckeditor 就麻烦多了，你知道怎么在同一个页面使用多个fckeditor 实例吗？还有如何获取 fckeditor 的值吗？这不是一句两句能解决的问题。

建议你还是用正规的 POST 来提交表单，况且你的 textarea 只是普通的留言，根本用不到那么高级的文本编辑器。

参考技术A

for 循环 

$("input[name=name]").change(function()
var str="";
str+="";//这里写你的table 的html代码；
for(var i=0;i<$(this).val();i++)
//如果放在div层中 给个class 或者id
$("#id").append(str);

)

这个是jquery的

参考技术B 在写行程天数前你必须要有一个写好的table 而且行程天数初始化为1 对吧，
然后使用keydown事件(就是你按下键盘后就获取你的行程天数)
接下来，
var strhtml= document.createElement("原有表格 id").innerHTML;
var div=document.createElement("表格所在div id");
for(var i=1,i<文本框的值,i++)
var NewDiv=document.createElement("table");

NewDiv.id="table"+i; //给新表格ID
NewDiv.innerHTML=strhtml; //把你创建的表格和你之前的表格一样
div.appendChild(NewDiv)

代码可能有错，纯手写，有问题M我。