gpt4 book ai didi

javascript - 根据用户选择添加动态行

转载 作者:行者123 更新时间:2023-12-01 01:29:14 25 4
gpt4 key购买 nike

<label>
<input type="radio" name="optradio" >1 PERSON
</label>
<label>
<input type="radio" name="optradio" >2 PERSON
</label>
<label>
<input type="radio" name="optradio" >3 PERSON
</label>

<div class="table-responsive">
<table class="table table-hover table-striped mah">
<tbody>
<tr>
<td>
<div class="form-group">
<input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div>
</td>
</tr>
</tbody>
</table>
</div>

目前,只有一个输入。如果用户选择 2 人或 3 人单选按钮,我们需要显示 2 或 3 个输入字段,并根据用户选择动态添加行

最佳答案

这里简单使用循环并将 html 放入容器中:

<label>
<input type="radio" name="optradio" value="1">1
PERSON
</label>
<label>
<input type="radio" name="optradio" value="2" >2
PERSON
</label>
<label>
<input type="radio" name="optradio" value="3" >3
PERSON
</label>

<div class="table-responsive">
<table class="table table-hover table-striped mah">
<tbody id="container">

</tbody>
</table>
</div>

并使用 jquery 循环来简单地创建动态内容:

$('input[type="radio"]').click( function(){
$val = $(this).val();
$('#container').html('');
$content = '';
var i = 1;
for( i = 0; i < $val; i++ ) {
$content += '<tr><td><div class="form-group"><input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div></td></tr>';
}
$('#container').html($content);
});

希望这有帮助。

关于javascript - 根据用户选择添加动态行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53454927/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com