`<select><option>`至`<table><td>`

Question

因此，我正在制作这个高尔夫统计数据跟踪网站，最终将其制作为应用程序，但这部分确实使我遇到了麻烦。基本上，我正在寻找一种功能，该功能将加载由下拉菜单选择的课程的pars。但是，我不确定是否必须创建多个变量来实现这一目标，或者不确定该变量是否足以在循环再次开始之前覆盖3个孔的范围。 '例如。（4-3-5和3-5-4）是唯一能够进行的模式，因为您只能选择3、9或18洞的游戏。如果太复杂或难以理解，非常感谢您的帮助。也不要理会当然没有定义的错误，因为这是我要提出问题的地方。

这是代码

<!DOCTYPE html>
<html>
  <script>
    function showInput() {
        document.getElementById('display1').innerHTML = 
                    document.getElementById("user_input1").value;
        document.getElementById('display2').innerHTML = 
                    document.getElementById("user_input2").value;
		document.getElementById('display3').innerHTML = 
                    document.getElementById("user_input3").value;
		document.getElementById('display4').innerHTML = 
                    document.getElementById("user_input4").value;				
}
	function courseSelect() {
		//////if document.getElementById('mySelect').innerHTML = 
					
}
  </script>
<body>

  <form>
	<input type="text" name="name1" id="user_input1"><br>
	<input type="text" name="name2" id="user_input2"><br>
	<input type="text" name="name3" id="user_input3"><br>
	<input type="text" name="name4" id="user_input4">
  </form>

  <input type="submit" onclick="showInput();"><br>  
  <label>Players: </label><br>
  <span id='display1'></span><br>
  <span id='display2'></span><br>
  <span id='display3'></span><br>
  <span id='display4'></span><br>
  
  <select id="mySelect" onchange="courseSelect()">
  <option disabled selected value> -- select a course -- </option>
  <option value="Bossame Tournament">Bossame Tournament</option>
  <option value="OSLA Open">OSLA Open</option>
  <option value="The Closed Tournament">The Closed Tournament</option>
  <option value="IWGA Championship">IWGA Championship</option>
  <option value="The Lawnmower Classic">The Lawnmower Classic</option>
  <option value="My World Match Play">My World Match Play</option>
  <option value="The Seasonal Championship">The Seasonal Championship</option>
  <option value="The ABC Mexican Open">The ABC Mexican Open</option>
  <option value="The Pomponians Championship">The Pomponians Championship</option>
  <option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
  <option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
  <option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
  <option value="Thee Grind">Thee Grind</option>
  <option value="Glakeside Classic">Glakeside Classic</option>
  <option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
  <option value="World Golf Classic">World Golf Classic</option>
</select>

<p id="course"></p>
<table id="scorecard"></table>
<table>

</table>

  
</body>
</html>

Answer 1

`<select><option>`至`<table><td>`

下面提供的演示演示了如何：

从选定的<option>
将数据转换为数组
将<td>收集到数组中
将数据数组分配到<td> s

此外，提供的总体OP（即 O 原始 P ost）代码已更改，以显示如何使用for循环和NodeLists / HTMLCollections比重复使用单个引用更有效。

`<option>`的解剖

如果我正确理解，则需要列出<select>中所选高尔夫球场中每个洞的标准杆等级列表。您没有提供这些数字，因此我添加了一门新课程（位于<option>s的索引1。）在演示中，只有一个<option>被修改，您必须提供其余部分的数据他们自己：

<option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>

通常，此数据在数据库中，并以JSON形式发送，但是由于数据的静态性质（高尔夫球场不会经常更改），这是列出高尔夫球场统计信息的一种可行方法。

从`<option>`

获取数据

value属性均为"72"，因为它是18洞最常见的面值（我不知道打3或9的职业比赛。）得到这个值：
- 引用该元素并为其后缀.value属性：
  
  var selectElement = document.getElementById('ID of select');
  var selectValue = selectElement.value;
data-*属性，例如data-par和data-yards，可以具有任意字符串值，但访问起来并不像value那样简单： / p>
- 通过使用<options>属性为对<select>的后缀加后缀，将<select>中的所有.options收集到HTMLCollection中：
  
  var optionsList = selectElement.options;
注意：我在每个洞都增加了码数，因为它始终包含在标准杆评级中。
- 然后引用所选的<option>：
  
  var optionData = optionList[selectElement.selectedIndex];
- 接下来，使用.dataset方法并将其后缀为data-par和data-yards（即par和yards）：
  
  var dataPar = optionData.dataset.par;
  var dataYards = optionData.dataset.yards;
在<option> 文本内容 </option>中获取文本类似于上一过程：
- 从上一个示例开始，使用optionData引用了所选的<option>：
  
  var optionText = optionData.text;

摘要

目前，您有四个数据字符串：

selctValue = "72"

dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
  dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"

optionText = "Masters Championship"

在四个数据串中，组2。dataPar 和 dataYards 需要转换为数组。将组1 selectValue 移至<td>和组3 optionText 移至<caption>：

var coursePar = document.getElementById('ID of td');
  var courseTitle = document.querySelector('caption');
  coursePar.innerHTML = selextedValue;;
  courseTitle.textContent = optionText;

注意：在这种情况下，.textContent和.innerHTML属性是可以互换的，但是了解它们之间的区别很重要，因此请参考参考部分以获取详细信息。

将<option>数据转换为数组

有两个以一系列数字出现的数据字符串，但它们不是：


dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
  dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"

如果以这种状态使用，它将在每个<td>中以相同的文字形式显示：

错误的结果

字符串："445,575,350,240"
  <td>445,575,350,240</td>

如果转换为字符串数组，则每个数字都将单独考虑：

正确的结果

一个数组：["445","575","350","240"]
  <td>445</td><td>575</td><td>350</td><td>240</td>

在这种情况下，请使用数组方法split()通过定位定界符（即逗号：,）来转换String：

每个数组现在将采用以下形式：array = ["1","2","3"]

var parArray = dataPar.split(',');
  var yardsArray = dataYards.split(',');

摘要

这时有两个数组：

一组18个洞的标准杆评级：


parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]

18个孔的码数数组：


yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]

将<td>s的NodeList转换为<td>s的数组

对于每个数据数组，需要在数组中引用单元格（即<tr>）的一行（即<td>）。这是分几行列出的过程：

将特定<td>的所有<tr>收集到NodeList中：


var parRow = document.getElementById('trOfPar');
  var NodeListOfParTD = parRow.querySelectorAll('td');

将NodeList转换为数组：


var ArrayOfParTD = Array.from(NodeListOfParTD);

为方便起见，第二个数组为：ArrayOfYardsTD。

摘要

这时有四个数组：

来自<option>属性data-par和data-yards的两个数组：


parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]

  yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]

来自两个单独的<td>s的两个<tr>s数组：


arrayOfParTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]

  arrayOfYardsTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]

将<option>s数据的数组设置为<td>的数组

要操纵数组，通常for循环就足够了。为了以较少冗长和更有效的方式操作数组，可以改用数组方法。数组方法.forEach()将获取一个数组并在每个数组元素上运行一个函数：

为了方便起见，

tdArray 与arrayOfParTD和arrayOfYardsTD

dataArray 与parArray和yardsArray相同

tdArray.forEach(function(td, index) {
  td.textContent = dataArray[index];
   });

摘要

最终结果应该是：

th,td{border:1px solid #000;text-align:center} th{text-align:left}

<table> <tr id="trOfPar"><th>Par: </th><td>4</td><td>5</td><td>4</td><td>3</td><td>4</td><td>3</td><td>4</td><td>5</td><td>4</td><td>4</td><td>4</td><td>3</td><td>5</td><td>4</td><td>5</td><td>3</td><td>4</td><td>4</td></tr> <tr id='trOfYards'><th>Yards: </th><td>445</td><td>575</td><td>350</td><td>240</td><td>455</td><td>180</td><td>450</td><td>570</td><td>460</td><td>495</td><td>505</td><td>155</td><td>510</td><td>440</td><td>530</td><td>170</td><td>440</td><td>465</td></tr> </table>

参考

获取/设置值

.getElementById()

.querySelector()

.value

.innerHTML

.textContent

.dataset

.options

.selectedIndex

获取/设置多个值

NodeLists/HTMLCollections

.querySelectorAll()

for loop

数组方法

Array.from()

.split()

.forEach()

用于演示

parseInt()

演示中的
数组方法

.map()

.reduce()

演示

前面各节中提供的代码与演示中的代码不同，但希望足够相似。 JavaScript的每一行都有注释。

function listPlayers() { /* Collect all <input>s and <td class="player">s into the NodeLists inputs and outputs respectively. */ var inputs = document.querySelectorAll('input'); var outputs = document.querySelectorAll('.player'); /* For each iteration of outputs set its text to the corresponding index of inputs value. */ for (let i = 0; i < outputs.length; i++) { outputs[i].textContent = inputs[i].value; } return false; } function courseSelect() { // <select id='tournaments'> var select = document.getElementById('tournaments'); // HTMLCollection of all <option>s in select#tornaments var opts = select.options; // <caption> var title = document.querySelector('caption'); // The last two <td> on <table id='course'> var pT = document.getElementById('pT'); var yT = document.getElementById('yT'); /* Set the inside HTML of <td id='pT'> to a String: ...that comprises of the text: "Course Par: "... ...followed by the value of <select id='tournaments'> */ pT.innerHTML = "Course Par: " + select.value; /* Set the text of <caption> to the text of the selected <option>THIS TEXT</option> */ title.textContent = opts[select.selectedIndex].text; /* Get the values of [data-par] and [data-yards] from the selected <option> */ var dataPar = opts[select.selectedIndex].dataset.par; var dataYards = opts[select.selectedIndex].dataset.yards; /* Convert each of the Strings from [data-par] and [data-yards] into arrays of Strings. */ // Array of par ratings of each hole var parArray = dataPar.split(','); // Array of yardages of each hole var yardsArray = dataYards.split(','); /* Collect the <td>s of <tr id='par'> and <tr id='yards'> into separate NodeLists then convert each into an Array. */ var parCells = Array.from(document.querySelectorAll('#par td')); var yardsCells = Array.from(document.querySelectorAll('#yards td')); /* Fill each cell of tr#par with a value from the array of par ratings according to matching index. */ parCells.forEach(function(par, index) { par.textContent = parArray[index]; }); /* Fill each cell of tr#yards with a value from the array of yardages according to matching index. */ yardsCells.forEach(function(yards, index) { yards.textContent = yardsArray[index]; }); /* Convert each String value of the array of yardages into a real Number */ var yardage = yardsArray.map(function(yrd) { return parseInt(yrd, 10); }); /* Get the sum of all of the Numbers in the new array. Note: the function addArray() is located outside of this function. */ var totalYards = yardage.reduce(addArray); // Set the total yards in td#yT yT.innerHTML = "Yardage: " + totalYards; return false; } /* Utility function used to add two numbers. The return value is used as a parameter to a Array.reduce() method that runs an array's values accumulatively. */ function addArray(total, number) { return total + number; }

th, td { border: 1px solid #000 } caption { font-size: 1.2rem; font-weight: 900 } #course th { text-align: left } #course td, .c { text-align: center }

<!DOCTYPE html> <html> <head> </head> <body> <form id='golf'> <fieldset id='players'> <legend>Players</legend> <input type="text" name="name1" id="p1"><br> <input type="text" name="name2" id="p2"><br> <input type="text" name="name3" id="p3"><br> <input type="text" name="name4" id="p4"><br> <button id='btn1' type="button" onclick='listPlayers()'>Done</button> </fieldset> <fieldset id='games'> <legend>Tournaments</legend> <select id="tournaments" onchange="courseSelect()"> <option disabled selected value=""> -- select a course -- </option> <option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option> <option value="72" data-par='' data-yards=''>Bossame Tournament</option> <option value="72" data-par='' data-yards=''>OSLO Open</option> <option value="72" data-par='' data-yards=''>The Closed Tournament</option> <option value="72" data-par='' data-yards=''>IWGA Championship</option> <option value="72" data-par='' data-yards=''>The Lawnmower Classic</option> <option value="72" data-par='' data-yards=''>My World Match Play</option> <option value="72" data-par='' data-yards=''>The Seasonal Championship</option> <option value="72" data-par='' data-yards=''>The ABC Mexican Open</option> <option value="72" data-par='' data-yards=''>The Pomponians Championship</option> <option value="72" data-par='' data-yards=''>Anthony Burke World Tour Championship</option> <option value="72" data-par='' data-yards=''>Never Be Royals Tournament</option> <option value="72" data-par='' data-yards=''>The Huggy McGurber Invitational presented by Glakeside Resorts</option> <option value="72" data-par='' data-yards=''>Thee Grind</option> <option value="72" data-par='' data-yards=''>Glakeside Classic</option> <option value="72" data-par='' data-yards=''>Resorts World Bimini Challenge</option> <option value="72" data-par='' data-yards=''>World Golf Classic</option> </select> <br> <hr> <table id="leaderboard" width="100%"> <caption></caption> <thead> <tr> <th width='55%'>Golfer</th> <th width='5%'>toPar</th> <th width='5%'>Thru</th> <th width='5%'>Today</th> <th width='5%'>R1</th> <th width='5%'>R2</th> <th width='5%'>R3</th> <th width='5%'>R4</th> <th width='10%'>Total</th> </tr> </thead> <tbody> <tr> <td class='player'></td> <td class='c'></td> <td class='c'>F</td> <td class='c'></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td class='player'></td> <td class='c'></td> <td class='c'>F</td> <td class='c'></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td class='player'></td> <td class='c'></td> <td class='c'>F</td> <td class='c'></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td class='player'></td> <td class='c'></td> <td class='c'>F</td> <td class='c'></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <table id='course'> <tbody> <tr id='holes'> <th>Hole: </th> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> <td> 9 </td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr id='par'> <th>Par: </th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr id='yards'> <th>Yards: </th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <th>Totals: </th> <td id='pT' colspan='9'></td> <td id='yT' colspan='9'></td> </tr> </tfoot> </table> </fieldset> </form> </body> </html>

Answer 2

要编写功能齐全的程序，我们需要了解游戏规则。根据您提供给我们的信息，我们可以编写一个工作程序的抽象模型。让您的用户或播放器选择孔的数量，例如3,9,18。我们可以假设两名玩家可以争夺得分/积分，其中得分最高的玩家可以赢得比赛。每个玩家将根据游戏规则得分。您的表格应该易于使用。通过标记用户输入来帮助用户。你给了我们四个为玩家输入文本框。因此，我们可以假设有四个参与者在竞争，而不是两个。默认值可能会引起误解，最好定义按钮的值，用户在单击按钮时会知道会发生什么。您已为我们提供了比赛和锦标赛的清单。这对于分析该项目非常有帮助。解决方案可以是两个方面。首先，您将需要有关游戏的数据。即比分，球员，锦标赛，日期。有了数据后，就可以使用它来生成有用的信息，例如统计信息。为了实现该目标，您将需要完整的堆栈技术。例如，html，JavaScript，PHP或Java或Python，MySQL或PostgreSQL。您始终可以在前端使用变量，但是变量的生命周期短暂而愉快。一旦用户退出程序，信息就消失了。另一方面，如果您只想创建“此高尔夫统计跟踪网站”。起点将是定义游戏规则。创建或设计用户界面。设计或创建数据库。收集数据。存储数据。检索数据。处理数据。显示信息。祝你好运！

//
<!DOCTYPE html>
<!--
index.html
-->
<html>
<head>
    <title>Golf stat tracking.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var course = "C1";
        var player1 = "P1";
        var player2 = "P2";
        var player3 = "P3";
        var player4 = "P4";
        var probability = [];
        function showInput() {
        document.getElementById('display1').innerHTML = document.getElementById("user_input1").value;
        document.getElementById('display2').innerHTML = document.getElementById("user_input2").value;
        document.getElementById('display3').innerHTML = document.getElementById("user_input3").value;
        document.getElementById('display4').innerHTML = document.getElementById("user_input4").value;
        player1 = document.getElementById("user_input1").value;
        player2 = document.getElementById("user_input2").value;
        player3 = document.getElementById("user_input3").value;
        player4 = document.getElementById("user_input4").value;
        stats(course);
        }
        function courseSelect() {
        ///////////////////////////////////////////////////////////    
        //////if document.getElementById('mySelect').innerHTML = //
        ///////////////////////////////////////////////////////////
        course = document.getElementById('mySelect').value;
        //alert(course);
        document.getElementById('p1').value = player1;
        document.getElementById('p2').value = player2;
        document.getElementById('p3').value = player3;
        document.getElementById('p4').value = player4;
        document.getElementById('c1').value = course;
        stats(course);
        }
        function stats(cor){
            var cors = cor;
            var comment = [
                "Win or lose.",
                "My favorate player.",
                "Against the wind.",
                "Best of the best.",
                "Only time will tell.",
                "The champ."
            ];
            var players = [
              player1, player2,
              player3, player4
            ];
            var coml = comment.length;
            var pll = players.length;
            var ranc = (Math.random() * (coml - 1));
            var ranc2 = (Math.random() * (coml - 1));
            var ranp = (Math.random() * (pll - 1));
            var ranp2 = (Math.random() * (pll - 1));
            for(var i = 0; i < coml; i++)
            {
               ranc = (Math.random() * (coml - 1));
               ranc2 = (Math.random() * (coml - 1));
               ranp = (Math.random() * (pll - 1));
               ranp2 = (Math.random() * (pll - 1));
            }
            //alert(coml + " " + ranc + " " + Math.round(ranc) + " " + ranc2 + " " + Math.round(ranc2) );
            document.getElementById('pl1').value = players[Math.round(ranp)];
            document.getElementById('pl2').value = players[Math.round(ranp2)];
            var pp1 = document.getElementById('pl1').value;
            var pp2 = document.getElementById('pl2').value;
            probability.push(pp1);
            var prl = probability.length;
            var pp1p = 0;
            var pp2p = 0;
            for(var i = 0; i < prl; i++)
            {
                if(pp1 === probability[i])
                {
                    pp1p++;
                }
                else if (pp2 === probability[i])
                {
                    if(pp1 !== pp2)
                    {
                       pp2p++; 
                    }
                }
            }
            document.getElementById('sc').value = cors;
            document.getElementById('comm1').value = "p("+pp1p +"/" + prl + ") " + comment[Math.round(ranc)];
            document.getElementById('comm2').value = "p("+pp2p +"/" + prl + ") " + comment[Math.round(ranc2)];
            document.getElementById('sco1').value = ranc;
            document.getElementById('sco2').value = ranc2;
            if (pp1 === pp2)
            {
                document.getElementById('pl1').value = player1;
                document.getElementById('pl2').value = player2;
                document.getElementById('comm1').value = comment[Math.round(ranc)];
                document.getElementById('comm2').value = comment[Math.round(ranc2)];
            }
        }

    </script>
</head>
<body>
    <div>Golfers:</div>
    <form>
        Name1
        <input type="text" name="name1" id="user_input1"><br>
        Name2
        <input type="text" name="name2" id="user_input2"><br>
        Name3
        <input type="text" name="name3" id="user_input3"><br>
        Name4
        <input type="text" name="name4" id="user_input4">
    </form>

    <input type="submit" value="OK" onclick="showInput();"><br>
    <label>Players: </label><br>
    <span id='display1'></span><br>
    <span id='display2'></span><br>
    <span id='display3'></span><br>
    <span id='display4'></span><br>
    <hr>
    <br>
    Course:
    <select id="mySelect" onchange="courseSelect()">
    <option disabled selected value> -- select a course -- </option>
    <option value="Bossame Tournament">Bossame Tournament</option>
    <option value="OSLA Open">OSLA Open</option>
    <option value="The Closed Tournament">The Closed Tournament</option>
    <option value="IWGA Championship">IWGA Championship</option>
    <option value="The Lawnmower Classic">The Lawnmower Classic</option>
    <option value="My World Match Play">My World Match Play</option>
    <option value="The Seasonal Championship">The Seasonal Championship</option>
    <option value="The ABC Mexican Open">The ABC Mexican Open</option>
    <option value="The Pomponians Championship">The Pomponians Championship</option>
    <option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
    <option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
    <option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
    <option value="Thee Grind">Thee Grind</option>
    <option value="Glakeside Classic">Glakeside Classic</option>
    <option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
    <option value="World Golf Classic">World Golf Classic</option>
    </select>

    <div>
        <h1>Score Card</h1>
        <form action='pathto/golfers.php' method='POST'>
            <table>
                <tr><td>Holes:</td>
                    <td><select name="holes">
                            <option selected="selected" value="3">3</option>
                            <option value="9">9</option>
                            <option value="18">18</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Player</td><td>Score</td><td>Comment</td>
                </tr>
                <tr><td><input type="text" name="p1" id="p1"></td>
                    <td><input type="text" name="sc1"></td>
                    <td><input type="text" name="com1"></td>
                </tr>
                <tr><td><input type="text" name="p2" id="p2"></td>
                    <td><input type="text" name="sc2"></td>
                    <td><input type="text" name="com2"></td>
                </tr>
                <tr><td><input type="text" name="p3" id="p3"></td>
                    <td><input type="text" name="sc3"></td>
                    <td><input type="text" name="com3"></td>
                </tr>
                <tr><td><input type="text" name="p4" id="p4"></td>
                    <td><input type="text" name="sc4"></td>
                    <td><input type="text" name="com4"></td>
                </tr>
                <tr>
                    <td>Date:</td>
                    <td><input type="date" name="date"></td>
                </tr>
                <tr>
                    <td>Time:</td>
                    <td><input type="time" name="time"></td>
                </tr>
                <tr>
                    <td>Course:</td>
                    <td><input type="text" name="c1" id="c1" readonly=""></td>
                </tr>
                <tr>
                    <td><input type="submit" value="OK"></td>
                </tr>
            </table>
        </form>
    </div>
    <div>
        <h1>STATS</h1>
        <table>
            <tr>
                <td>Player</td><td>Stats</td><td>Comment</td>
            </tr>
            <tr><td><input type="text" name="pl1" id="pl1" readonly=""></td>
                <td><input type="text" name="sco1" id="sco1" readonly=""></td>
                <td><input type="text" name="comm1" id="comm1"></td>
            </tr>
            <tr><td><input type="text" name="pl2" id="pl2" readonly=""></td>
                <td><input type="text" name="sco2" id="sco2" readonly=""></td>
                <td><input type="text" name="comm2" id="comm2"></td>
            </tr>
            <tr><td><input type="text" name="pl3" id="pl3" readonly=""></td>
                <td><input type="text" name="sco3" readonly=""></td>
                <td><input type="text" name="comm3" id="comm3"></td>
            </tr>
            <tr><td><input type="text" name="pl4" id="pl4" readonly=""></td>
                <td><input type="text" name="sco4" readonly=""></td>
                <td><input type="text" name="comm4" id="comm4"></td>
            </tr>
            <tr>
                <td>Date:</td>
                <td><input type="date" name="sdate" readonly=""></td>
            </tr>
            <tr>
                <td>Time:</td>
                <td><input type="time" name="stime" readonly=""></td>
            </tr>
            <tr>
                <td>Course:</td>
                <td><input type="text" name="scourse" id="sc" readonly=""></td>
            </tr>
        </table>
    </div>
    <br>
    <hr>
    <br>
</body>
</html>
//

如何从选择下拉菜单中调用选项

2 个答案:

`<select><option>`至`<table><td>`

`<option>`的解剖

从`<option>`

摘要

将`<option>`数据转换为数组

摘要

将`<td>s`的NodeList转换为`<td>s`的数组

摘要

将`<option>s`数据的数组设置为`<td>`的数组

摘要

参考

演示

如何从选择下拉菜单中调用选项

2 个答案:

<select><option>至<table><td>

<option>的解剖

从<option>

摘要

将<option>数据转换为数组

摘要

将<td>s的NodeList转换为<td>s的数组

摘要

将<option>s数据的数组设置为<td>的数组

摘要

参考

演示

`<select><option>`至`<table><td>`

`<option>`的解剖

从`<option>`

将`<option>`数据转换为数组

将`<td>s`的NodeList转换为`<td>s`的数组

将`<option>s`数据的数组设置为`<td>`的数组