Question

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

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





Answer 1

下面代码基本按照你的格式来的，键盘抬起 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 只是普通的留言，根本用不到那么高级的文本编辑器。

Answer 2

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的

Answer 3

在写行程天数前你必须要有一个写好的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我。