Jquery 在表单中复制元素时出现问题->;同名
所以我得到了这个: HTMLJquery 在表单中复制元素时出现问题->;同名,jquery,Jquery,所以我得到了这个: HTML 3.选择元素: 1. 2. 3. 4. 5. 时间 08:00 08:30 09:00 09:30 10:00 10:30 11:00 11:30 12:00 12:30 13:00 13:30 14:00 14:30 15:00 15:30 16:00 16:30 17:00 17:30 18:00 18:30 19:00 19:30 20:00 20:30 21:00 21:30 22:00 22:30 2: 0 1. 2. 3. 4. 5. 6. 7. 8.
3.选择元素:
1.
2.
3.
4.
5.
时间
08:00
08:30
09:00
09:30
10:00
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00
14:30
15:00
15:30
16:00
16:30
17:00
17:30
18:00
18:30
19:00
19:30
20:00
20:30
21:00
21:30
22:00
22:30
2:
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
4:
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
可转换
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
jQuery
$(文档).ready(函数(){
$(“antal#u tidspunkter”).bind(“change”,function(){
$(“#mytable tr:gt(6)”).remove();
对于(var i=1;i
演示:
工作原理是这样的,当您更改选择器中的元素数时,它会添加更多元素
我的问题是,当它复制元素时,它会保留名称:seats\u timeclock[29]
,因此稍后当我处理表单(PHP)时,我只会收到一个元素的数据
每次元素被复制时,是否有必要在111119999
的[]
中添加一个随机数?否则我无法获取新元素上填充的数据。使用以下代码:
$(document).ready(function(){
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
$("#mytable tr:gt(1):lt(5)").clone().children("select").attr("name", "seats_free_2tables[" + random() + "]").appendTo("#mytable");
}
});
});
function random()
{
return Math.floor(Math.random()*10);
}
更新:此代码完全有效:
函数随机()
{
返回Math.floor(Math.random()*10);
}
$(文档).ready(函数(){
$(“antal#u tidspunkter”).bind(“change”,function(){
$(“#mytable tr:gt(6)”).remove();
对于(var i=1;i
看这个。给所有人一个类
random
,你需要更改它 您可以使用数组输入:
<select name="seats_timeclock[]">
克隆元素后,可以更改
name
属性:
var clone = $("#mytable tr:gt(1):lt(5)").clone();
var min = 1111;
var max = 9999;
var number = Math.round(Math.random() * (max-min)) + min ;
clone.find('select[name^=seats_timeclock]')
.attr('name','seats_timeclock['+number+']');
clone.appendTo("#mytable");
这里有一个演示:$(document).ready(function(){
//函数生成随机数
//1111至9999之间
函数randNum(){
返回Math.floor(Math.random()*(9999-1111+1))+1111;
}
$(“antal#u tidspunkter”).bind(“change”,function(){
$(“#mytable tr:gt(6)”).remove();
对于(var i=1;i
<table id="mytable">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3. Choose elements:
</td>
<td>
<select name="antal_tidspunkter" id="antal_tidspunkter">
<option value="1" SELECTED>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr class="highlightedRowStart">
<td class="borderLeft">
Time
</td>
<td class="borderRight">
<select name="seats_timeclock[29]">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00" SELECTED>18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
</select>
</td>
</tr>
<tr class="highlightedRowMiddle">
<td class="borderLeft">
2:
</td>
<td class="borderRight">
<select name="seats_free_2tables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" SELECTED>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="">
<td class="borderLeft">
4:
</td>
<td class="borderRight">
<select name="seats_free_4tables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" SELECTED>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="highlightedRowEnd">
<td class="borderLeft">
Converttable
</td>
<td class="borderRight">
<select name="seats_converttables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" SELECTED>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="spacer">
<td></td>
</tr>
</table>
$(document).ready(function() {
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
$("#mytable tr:gt(1):lt(5)").clone().appendTo("#mytable");
}
});
});
上面的代码将在不更改HTML的情况下工作,并且只使用一条chain语句
根据你的演示
$(文档).ready(函数(){
//函数生成随机数
函数randNum(){
返回Math.floor(Math.random()*(9999-1111+1))+1111;
}
$(“antal#u tidspunkter”).bind(“change”,function(){
$(“#mytable tr:gt(6)”).remove();
对于(var i=1;i
我需要号码,我有你创建页面的代码,但这个问题出现在编辑页面,我需要号码,它是更新正确元素的id“29”不是固定的,它也可能是99999,所以它不会训练“29”不是固定的,它也可能是99999,所以它不会训练然后简单地创建一个callba
<table id="mytable">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3. Choose elements:
</td>
<td>
<select name="antal_tidspunkter" id="antal_tidspunkter">
<option value="1" SELECTED>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr class="highlightedRowStart">
<td class="borderLeft">
Time
</td>
<td class="borderRight">
<select name="seats_timeclock[29]">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00" SELECTED>18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
</select>
</td>
</tr>
<tr class="highlightedRowMiddle">
<td class="borderLeft">
2:
</td>
<td class="borderRight">
<select name="seats_free_2tables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" SELECTED>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="">
<td class="borderLeft">
4:
</td>
<td class="borderRight">
<select name="seats_free_4tables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" SELECTED>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="highlightedRowEnd">
<td class="borderLeft">
Converttable
</td>
<td class="borderRight">
<select name="seats_converttables[29]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" SELECTED>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr class="spacer">
<td></td>
</tr>
</table>
$(document).ready(function() {
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
$("#mytable tr:gt(1):lt(5)").clone().appendTo("#mytable");
}
});
});
$(document).ready(function(){
var clonedObj;
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
$(clonedObj).find('select[name="seats_timeclock[29]"]').attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
$(clonedObj).appendTo("#mytable");
}
});
});
$(document).ready(function(){
var clonedObj;
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
clonedObj = $("#mytable tr:gt(1):lt(5)").clone();
$(clonedObj).find('select').filter(function(){
if($(this).attr('name').match(/seats_timeclock/)){
return true;
} else {
return false;
}
}).attr('name', 'seats_timeclock[' + Math.floor((Math.random()*100000)+1) + ']');
$(clonedObj).appendTo("#mytable");
}
});
});
$(document).ready(function() {
// function to generate random number
// between 1111 to 9999
function randNum() {
return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
}
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
$("#mytable tr:gt(1):lt(5)")
.clone()
.find('select[name^=seats_timeclock]')
attr('name', function() { // changing the name
return 'seats_timeclock_[' + randNum() + ']';
})
.end() // go back to clone element
.appendTo("#mytable");
}
});
});
$(document).ready(function() {
// function to generate random number
function randNum() {
return Math.floor(Math.random() * (9999 - 1111 + 1)) + 1111;
}
$("#antal_tidspunkter").bind("change", function() {
$("#mytable tr:gt(6)").remove();
for (var i = 1; i < this.value; i++) {
var randnr = randNum();
$("#mytable tr:gt(1):lt(5)")
.clone()
.find('select[name^=seats_timeclock]')
.attr('name', function() { // changing the name
return 'seats_timeclock[' + randnr + ']';
})
.end() // need to put end to jump to clone
.find('select[name^=seats_free_2tables]')
.attr('name', function() { // changing the name
return 'seats_free_2tables[' + randnr + ']';
})
.end() // need to put end to jump to clone
.find('select[name^=seats_free_4tables]')
.attr('name', function() { // changing the name
return 'seats_free_4tables[' + randnr + ']';
})
.end() // need to put end to jump to clone
.find('select[name^=seats_converttables]')
.attr('name', function() { // changing the name
return 'seats_converttables[' + randnr + ']';
})
.end() // go back to clone element
.appendTo("#mytable");
}
});
});