HTML 中的可扩展表格协助

Question

我正在制作一个武术比赛的在线报名表。到目前为止，我一切都很好。但是，有一部分是用户 select 他们希望输入多少申请人参加比赛。他们 select 的数量将决定出现的条目行的数量。虽然我不确定如何做到这一点，如果你们中的任何天才可以帮助我吗？

提前致谢。

Answer 1

您可以使用 jquery 动态附加 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>

Answer 2

根据您的描述，如果最终用户选择 8 作为他们将在比赛中注册的人数，则下一系列注册元素将与他们选择的人数相对应。

这是我的 PHP 文件中的 HTML 表格：

KarateCompetition.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," 中编写我们的自定义逻辑，我们一定会将该文件包含在我们的 PHP 页面中我们之后已从 Google 中获取 jQuery（只需插入显示的行即可将 jQuery 动态包含在您的 PHP 页面中）

这是我的 jQuery（一个 Javascript 库）逻辑，我将使用它在用户选择特定数量的参与者时动态加载 HTML 元素：

karate.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

要测试，here's a JSFiddle

HTML 中的可扩展表格协助

Assistance with Extendable Forms in HTML

html

php

forms