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

发布网友 发布时间：2022-04-20 20:25

我来回答

共3个回答

热心网友 时间：2022-04-20 21:54

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

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

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

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

每一个行程  textarea 有一个 name，schele1, schele2, schele3...

<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="schele' + 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>

热心网友 时间：2022-04-20 23:12

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的

热心网友 时间：2022-04-21 00:47

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