我正在为武术比赛制作在线报名表。到目前为止,我一切都很好。但是,在某一部分,用户可以选择他们希望输入多少申请人参加比赛。他们选择的数量将决定出现的条目行的数量。我不确定该怎么做,如果你们中的任何天才可以帮助我吗?
提前谢谢你。
从您的描述来看,如果最终用户选择 8 作为他们将在比赛中注册的人数,那么接下来的一系列注册元素将与他们选择的人数相对应。
这是我的PHP文件中的HTML表单:
空手道比赛.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name = "my-form" id = "my-form">
<select name = "number-of-participants" id = "number-of-participants">
<option value = "1">1</option>
<option value = "2">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>
</select>
<div id = "entry-details-area">
<!-- This is where we'll dynamically insert our rows -->
</div>
</form>
</body>
<!--First, grab jQuery from Google we need this-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--Next, include my logic-->
<script src = "karate.js"></script>
</html>
接下来,我们将用"karate.js编写我们的自定义逻辑,并且我们确保在从Google获取jQuery后将该文件包含在PHP页面中(只需插入显示的行即可动态地将jQuery包含在PHP页面中)
这是我的jQuery(Javascript库)逻辑,当用户选择特定数量的参与者时,我将使用它来动态加载HTML元素:
空手道.js:
//This is my HTML select element "number-of-participants"
var participants_selector = $("#number-of-participants");
//This is where I want to add my dynamic HTML input elements
var entry_details_area = $("#entry-details-area");
//Each time a new value is chosen, grab their number of participants
participants_selector.on("change", function()
{
//Get the number of participants that the end-user has selected
var number_of_participants = participants_selector.val();
//Clear out any previously-appended HTML
entry_details_area.empty();
//Next, create a corresponding number of input elements for the number of participants selected.
for (var i = 0; i < Number(number_of_participants); i++)
{
//Remember: Arrays start counting at 0, so to make it human-readable, add +1
var participant_number = i+1;
//Let's add a simple box: "first-name" for each participant
var entry_form_html = '<p>Participant ' + participant_number + ' first name is: '
+'<input name = "first-name-'+participant_number+'" id = "first-name-'+participant_number+'"></p>';
//Add the HTML for each participant
entry_details_area.append(entry_form_html);
}//end of loop
});//end of on-change listener logic
为了测试,这里有一个JSFiddle
你可以使用 jquery do dinamend html 代码。它看起来像这样:
<table id='tableid'>
<tr><td>Name</td><td>Age</td></tr>
</table>
<script>
var x = 5; // user input
for(y=0;y<x;Y++){
$('#tableid').append('<html code here to the other <tr> lines>');
}
</script>