如何使用Javascript表單元素填充html表？

Question

本質上，我想顯示一張表格的10行，並讓他們在提交表單時用人們的名字更新。 所以本質上我需要將表格輸入寫入表格單元格。 如果有10位以上的人填寫該表格，我希望表格僅顯示10位，這樣它就會碰到較早的表格之一。 到目前為止，這是我正在嘗試的方法，但是我真的不知道如何進行。

<html>
<h2>Change Our Lights:</h2>
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
              <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"<br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>

<script type="text/javascript">
 function updateTable(){
     if (!document.getElementsByTagName) return;
     tabBody=document.getElementsByTagName("tbody").item(0);
     row=document.createElement("tr");
     cell1 = document.createElement("td");
     textnode1=document.forms['leds'].elements[3].value;
     cell1.appendChild(textnode1);
     row.appendChild(cell1);
     tabBody.appendChild(row);
 }
</script>

<body>
<h1>Who has Changed Our Lights?</h1>
<table border='1' id='mytable'>
<tbody>
<tr>"This Could Be You"</tr>
</tbody>
</table>
</body>

</html>

我根本無法將表格元素顯示在表格中。

Answer 1

您的HTML有一些錯別字和其他問題。 您的JavaScript處在正確的軌道上，但過於復雜（通常將所有這些都放在HTML的head部分是一種好習慣）。 這是一個可行的測試頁：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>

  <script type="text/javascript"> <!--

 var tabBody, row, cell;
 function updateTable(){
     tabBody=document.getElementById("editable");
     row=document.createElement("tr");
     cell = document.createElement("td");
     cell.innerHTML=document.forms['leds'].elements[3].value;
     row.appendChild(cell);
     if(tabBody.childNodes.length==10)
       tabBody.removeChild(tabBody.childNodes[0])
     tabBody.appendChild(row);
 }

  // -->
  </script>
</head>
<body>

<h2>Change Our Lights:</h2>
<!-- <form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF"> -->
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
              <input type="radio" name="led" value="1" />On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10" />seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here" /><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>

<h1>Who has Changed Our Lights?</h1>

<table border='1'>
<thead><tr><th>This Could Be You</th></tr></thead>
<tbody id="editable"></tbody>
</table>

</body>
</html>

如何使用Javascript表單元素填充html表？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-11-23 15:37:10

如何使用Javascript表單元素填充html表？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-11-23 15:37:10

解決方案1
1 已采納 2014-11-23 15:37:10