使用表单中的数据向表中添加新行 [英] Adding new rows into the table with data from form
本文介绍了使用表单中的数据向表中添加新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在表格中添加新行，并在表格中输入数据。
从中获取数据的表格代码：
< div class = left >
全名：< br >
< 输入 名称 = 名称 id = name_input type = text onclick = myFunction0（） < span class =code-keyword>> < br >
< p id = myP style = font-size：12px;显示：无;颜色：灰色 > *此处为帮助文字。< / p >
电子邮件：< < span class =code-leadattribute> / br >
< 输入 id = email type = email onclick = myFunction1（） > < br >
< p id = myP1 style = font-size：12px;显示：无;颜色：灰色 > *此处为帮助文字。< / p >
City < br >
< < span class =code-leadattribute> input name = name id = city type = text onclick = myFunction2（） > < br > < br >
< p id = myP2 样式 = 字体大小：12像素;显示：无;颜色：灰色 > *此处为帮助文字。< / p > < br > < br > < br > < br < span class =code-keyword>> < br >
< ; div class < span class =code-a ttribute> = right style = margin-top：28px; >
乘坐小组？ < br >
< label class = container > 始终< / label >
< 输入 类型 = radio id = < span class =code-keyword> a name = feature value = true >
< label class = 容器 > 有时< / label >
< 输入 type = radio id = s 名称 = 功能 value = false < span class =code-keyword> / >
< label class = 容器 > 从不< / label >
< 输入 类型 = radio id = n name = feature value = false / > < br > < br > < br >
星期几< span class =code-keyword>< br >
< label > Sun < / label >
< 输入 类型 = 复选框 id = sun 名称 = < span class =code-keyword> feature value = true >
< label > Mon < / label >
< input type = 复选框 id = mon 名称 = 功能 value = false / >
< label > Tue < / label >
< 输入 type = 复选框 id = tue name = feature value = false / >
< label > Wen < / label < span class =code-keyword>>
< 输入 type = checkbox id = wen name = 功能 value = false / >
< 标签 > Thu < / label >
< 输入 type = 复选框 id = thu name = 功能 value = false / >
< label > Fri < / label >
< 输入 类型 = 复选框 id = fri name = feature value = false / >
< label > 周六< / label >
< 输入 type = 复选框 id = sat name = feature value = false / > < br > < br >
< 按钮 type = submit 名称 = 提交 class = w3-button w3-green id = add_btn value = 保存 style = margin-right：240px; float：right > < a style = font-size：14px;颜色：白色！重要 > 保存< / a > < /按钮 >
< 按钮 class = w3-button w3-grey id = 取消 < span class =code-attribute> value = 取消 style = float：right > 取消< / button >
< / div > < / div >
我尝试过：
我尝试使用此代码添加新行：
< script>
function addRow（）{
var table = document .getElementById（' myTable'）;
var columnLength = table.getElementsByTagName（' tr'）[ 0 ]。children.length;
var units = document .getElementsByClassName（' unit-table'）;
var tr = document .createElement（' tr'）;
tr.className = ' unit-table';
for （ var i = 0 ; i< columnLength; i ++）{
var td = document .createElement（ ' td'）;
var text = document .createElement（' input'）;
text.type = ' text';
td.appendChild（text）;
tr.appendChild（td）;
}
table.appendChild（tr）;
}
document .getElementById（' add_btn'）。onclick = addRow;
< / script>
解决方案
您好，
问题出在你的保存按钮上。
将行添加到表页面后重新加载，因此你无法看到表格中的变化。
使用下面的代码并用以下代码替换你的按钮控件：
脚本：
< script type =text / javascript>
函数addRow（）{
var table = document.getElementById（'myTable'）;
var columnLength = table.getElementsByTagName（'tr'）[0] .children.length;
var units = document.getElementsByClassName（'unit-table'）;
var tr = document.createElement（'tr'）;
tr.className ='unit-table';
for（var i = 0; i< columnLength; i ++）{
var td = document.createElement（'td'）;
var text = document.createElement（'input'）;
text.type ='text';
text.id ='text'+ i;
if（i == 0）{
text.value = document.getElementById（'name_input'）。value;
} else if（i == 1）{
text.value = document.getElementById（'email'）。value;
} else if（i == 2）{
text.value = document.getElementById（'city'）。value;
}
td.appendChild（text）;
tr.appendChild（td）;
}
table.appendChild（tr）;
}
// document.getElementById（'add_btn'）。onclick = addRow（）;
< / script>
html部分：
< table id =myTableborder =1cellpadding =5cellspacing =5>< tbody>< tr class =unit-table>< TD>全名：
< / td>< td>电子邮件：
< / td>< td>城市：
< / td>< / tr>< / tbody>< / table>
保存按钮代码：
< input id =Button1type =buttonvalue =buttononclick =addRow（）;/>
我以前习惯使用表格 - 偶尔也会这样 - 但我发现使用AJAX要方便得多。您将数据发送到服务器，处理它，然后将处理后的工作返回到屏幕（在本例中为您的表）。你不需要name =;只是一个id =和DOM来检索你需要的值。
我特别觉得提交表格加载一个（新的？）页面很烦人。
我的情况，你有< tbody> - 所以你给它一个id，然后在你的AJAX（用新数据）重建你的表并返回它来替换旧的。
一个常见的地方处理效果非常好的是每排有是/否按钮的表格。单击是或否时，数据将发送到服务器，记录答案，并使用省略（或修改）行的新填充表刷新表。看起来相当不错，因为列表会逐渐减少。
I want to add new rows into the table with data that is entered into the form.
Code for form from where it should take data:
<div class="left">
Full name: <br>
<input name="name" id="name_input" type="text" onclick="myFunction0()" ><br>
<p id="myP" style="font-size:12px; display:none; color:gray">*Help text here.</p>
Email: </br>
<input id="email" type="email" onclick="myFunction1()"><br>
<p id="myP1" style="font-size:12px; display:none; color:gray">*Help text here.</p>
City <br>
<input name="name" id="city" type="text" onclick="myFunction2()" ><br><br>
<p id="myP2" style="font-size:12px; display:none; color:gray">*Help text here.</p><br><br><br><br><br>
<div class = "right " style="margin-top:28px;">
Ride in group? <br>
<label class="container">Always</label>
<input type="radio" id="a" name="feature" value="true">
<label class="container">Sometimes</label>
<input type="radio" id="s" name="feature" value="false" />
<label class="container">Never</label>
<input type="radio" id="n" name="feature" value="false" /><br><br><br>
Days of the week <br>
<label >Sun</label>
<input type="checkbox" id="sun" name="feature" value="true">
<label >Mon</label>
<input type="checkbox" id="mon" name="feature" value="false" />
<label >Tue</label>
<input type="checkbox" id="tue" name="feature" value="false" />
<label >Wen</label>
<input type="checkbox" id="wen" name="feature" value="false" />
<label >Thu</label>
<input type="checkbox" id="thu" name="feature" value="false" />
<label >Fri</label>
<input type="checkbox" id="fri" name="feature" value="false" />
<label >Sat</label>
<input type="checkbox" id="sat" name="feature" value="false" /><br><br>
<button type="submit" name="submit" class=" w3-button w3-green" id="add_btn" value="Save" style="margin-right:240px ; float:right " ><a style="font-size:14px; color:white!important ">Save </a></button>
<button class=" w3-button w3-gray" id="cancel" value="Cancel" style=" float:right">Cancel </button>
</div></div>
What I have tried:
I have tried with this code adding new row:
<script>
function addRow() {
var table = document.getElementById('myTable');
var columnLength = table.getElementsByTagName('tr')[0].children.length;
var units = document.getElementsByClassName('unit-table');
var tr = document.createElement('tr');
tr.className = 'unit-table';
for (var i = 0; i < columnLength; i++) {
var td = document.createElement('td');
var text = document.createElement('input');
text.type = 'text';
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('add_btn').onclick = addRow;
</script> 解决方案
Hi,
The problem is in your save button.
After adding rows into the table page gets reloaded ,due to this you are not able to see the changes in the table.
use below code and replace your button control with below:
SCRIPT:
<script type="text/javascript"> function addRow() { var table = document.getElementById('myTable'); var columnLength = table.getElementsByTagName('tr')[0].children.length; var units = document.getElementsByClassName('unit-table'); var tr = document.createElement('tr'); tr.className = 'unit-table'; for (var i = 0; i < columnLength; i++) { var td = document.createElement('td'); var text = document.createElement('input'); text.type = 'text'; text.id = 'text' + i; if (i == 0) { text.value = document.getElementById('name_input').value; } else if (i == 1) { text.value = document.getElementById('email').value; } else if (i == 2) { text.value = document.getElementById('city').value; } td.appendChild(text); tr.appendChild(td); } table.appendChild(tr); } // document.getElementById('add_btn').onclick = addRow(); </script>
html part:
<table id="myTable" border="1" cellpadding="5" cellspacing="5"><tbody><tr class="unit-table"><td> Full name: </td><td> Email: </td><td> City: </td></tr></tbody></table>
Save button code:
<input id="Button1" type="button" value="button" onclick="addRow();"/>
I used to use forms - occasionally I still do - but I've found it's much more convenient to use AJAX. You send your data to the server, processes it, and then returned the processed work back to the screen (in this case, your table). You don't need name=; just an id= and the DOM to retrieve the values you need.
I particularly found it annoying that submitting a form loaded a (new?) page.
I your case, you have <tbody> - so you give it an id and then rebuild your table in your AJAX (with the new data) and return it to replace the old.
A common place where this type of treatment works very well is a table with Yes/No buttons on each row. When you click Yes or No, the data is sent to the server, the answer recorded, and the table refreshed with the new population with the row omitted (or modified). Looks quite nice as the list decreases as it's tended to.
这篇关于使用表单中的数据向表中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
