Как заполнить таблицу html элементами формы Javascript?

По сути, я хочу отобразить 10 строк таблицы и обновить их с именами людей при отправке форм. Поэтому, по сути, мне нужно написать входные данные формы в ячейки таблицы. Когда более 10 человек заполняют форму, я хочу, чтобы таблица показывала только 10, чтобы она ударила одну из ранних. Пока это то, что я пытаюсь, но я действительно не знаю, как действовать дальше.Как заполнить таблицу html элементами формы Javascript?

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

Я не могу заставить элементы формы появляться в таблице вообще.

источник

2014-11-23 sTr8_Struggin

В вашем HTML есть опечатки и другие проблемы. Ваш JavaScript был на правильном пути, но слишком сложный (и, как правило, это хорошая практика, чтобы поместить все его в раздел head HTML). Вот эффективная тестовая страница:

<!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>

источник

2014-11-23 15:37:10 vernonner3voltazim

Есть ли способ сделать эту таблицу доступной для всех зрителей страницы, поскольку люди обновляют ее без использования AJAX? –

@ sTr8_Struggin - Я не буду следовать за тобой; тестовая страница не использует AJAX прямо сейчас. Это даже не общение с веб-сервером, потому что для тестирования JavaScript мне не нужно было этого делать, поэтому см. Тег 'form', который закомментирован, по сравнению с тем, который я написал для тестирования. (Если это разрешено, сервер будет получать варианты освещения пользователя.) Единственное предположение состоит в том, что эта конкретная страница доступна с некоторого веб-сайта, как и любая другая обычная веб-страница (просто требуется имя файла, где оно сохраняется на сервере , и ссылку на него с какой-либо другой веб-страницы, возможно, на домашней странице). – vernonner3voltazim

Подумайте больше о том, что вы спросили, возможно, ваш вопрос касается любого, кто просматривает страницу, просматривая обновленную страницу, поскольку OTHERS отправляют сменяющие свет запросы на веб-сервер. Хорошо, если это то, о чем вы просите, тогда ДА, вам нужно изучить «События, отправленные сервером». Я не сделал достаточно с этим, чтобы предложить точное предложение (также обратите внимание, что IE не поддерживает его, в то время как другие браузеры), но это практически идеальный ответ на вопрос, который вы можете задать. – vernonner3voltazim

Как заполнить таблицу html элементами формы Javascript?

ответ

Смежные вопросы