javascript 使用Javascript在html表中动态添加多行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12576366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding multiple rows in html table dynamically using Javascript
提问by qwerty
Adding a single row in a table (html) and deleting it, using JavaScript, is simple. But, is it possible to add multiple rows, like 2 or more, by calling the addrowfunction only once? The added rows will have different elements, like first row will be having a textfield, the other a textarea and like that...
使用 JavaScript 在表 (html) 中添加一行并删除它很简单。但是，是否可以通过仅调用一次addrow函数来添加多行，例如 2 行或更多行？添加的行将具有不同的元素，例如第一行将具有文本字段，另一行将具有文本区域，诸如此类......
Is there any other alternative in html to do that?
在 html 中还有其他替代方法可以做到这一点吗？
回答by qwerty
I solved it by myself by writing code similar to this :
我通过编写类似于此的代码自己解决了这个问题：
adding three rows,first with a textfield,second having a textarea and the third having a button
添加三行，第一行是文本框，第二行是文本区域，第三行是按钮
function addRow(tableId)
{
var addrow=1;
var table=document.getElementById(tableId);
var rowCount=table.rows.length;
for(var i=1;i<=3;i++)
{
if(addrow==1)
{
var newRow=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("input");
element0.type="text";
cell0.appendChild(element0);
}
if(addrow==2)
{
var newRow2=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("textarea");
cell0.appendChild(element0);
}
if(addrow==3)
{
var newRow3=table.insertRow(rowCount);
var cell0=newRow1.insertCell(0);
var element0=document.createElement("input");
element0.type="button";
cell0.appendChild(element0);
}
addrow++;
}
}
Each time the forloop runs, a new html element is added in the table and hence I got three rows added dynamically each having a differentelement .
每次for循环运行时，表中都会添加一个新的 html 元素，因此我动态添加了三行，每行都有一个不同的element 。
回答by Divyang Upadhyay
function gen_textbox(tr, id, name, type, value){
td = document.createElement("td");
tr.appendChild(td);
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("name", name);
if(type == "text"){
input.setAttribute("type", "text");
}
else if (type == "hidden") {
input.setAttribute("type", "hidden");
}
else{
input.setAttribute("type", "pass");
}
input.setAttribute("value", value);
td.appendChild(input);
}
function gen_hiddenbox(node, id, name, value){
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("name", name);
input.setAttribute("type", "hidden");
input.setAttribute("value", value);
node.appendChild(input);
}
function gen_label(tr, id, text){
td = document.createElement("td");
tr.appendChild(td);
var input = document.createElement("label");
input.setAttribute("id", id);
var rtext = document.createTextNode(text);
input.appendChild(rtext);
td.appendChild(input);
}
function gen_label(tr, id, text, td_class){
td = document.createElement("td");
td.setAttribute("class", td_class);
tr.appendChild(td);
var input = document.createElement("label");
input.setAttribute("id", id);
var rtext = document.createTextNode(text);
input.appendChild(rtext);
td.appendChild(input);
}
function getKeyValueFromJSON(jsonObj, valueNames) {
var value, text = "", temp="";
obj= '{ "ValueText": [';
for(var i=0; i<jsonObj.length; i++) {
text = "";
for(var j=0; j<valueNames.length; j++) {
temp="jsonObj[i]."+valueNames[j];
text = text+eval(temp)+" <b>|</b> ";
}
value = jsonObj[i].id;
if(i<jsonObj.length-1)
obj = obj+'{ "value": "'+value+'", "text": "'+text+'" },';
else
obj = obj+'{ "value": "'+value+'", "text": "'+text+'" }';
}
obj=obj+"]}";
return obj;
}
function gen_select(tr, DrdId, Drdname, multiple, Drdsize, Drdnode, jsonObj) {
td = document.createElement("td");
tr.appendChild(td);
var select = document.createElement("select");
select.setAttribute("id", DrdId);
select.setAttribute("name", Drdname);
if(multiple == true){
select.setAttribute("multiple", "multiple");
}
select.setAttribute("size", Drdsize);
var option;
option = document.createElement("option");
option.setAttribute("value", "Select "+Drdnode);
option.innerHTML = "Select "+Drdnode;
select.appendChild(option);
for(var i=0; i<jsonObj.length; i++){
option = document.createElement("option");
option.setAttribute("value", jsonObj[i].value);
option.innerHTML = jsonObj[i].value+" : "+jsonObj[i].text;
select.appendChild(option);
}
td.appendChild(select);
}
function gen_button(tr, id, value, onclk_fun) {
td = document.createElement("td");
tr.appendChild(td);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("id", id);
button.setAttribute("value", value);
button.setAttribute("onclick", onclk_fun);
td.appendChild(button);
}
function gen_button(tr, id, value, onclk_fun, Class) {
td = document.createElement("td");
tr.appendChild(td);
var button = document.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("id", id);
button.setAttribute("value", value);
button.setAttribute("onclick", onclk_fun);
button.setAttribute("class", Class);
td.appendChild(button);
}
function clearSelected(sel_id) {
var elements = document.getElementById(sel_id).options;
for(var i = 0; i < elements.length; i++){
elements[i].selected = false;
}
}First create Generic Function to Add dynamically button, textbox and etc
首先创建通用函数来动态添加按钮、文本框等
function create_hiddenBox() {
/*
This is only for Spring form
In jsp and spring suppose <form:select path="evp_veh_id.veh_id" size="1" >
var sel_veh = document.getElementById("evp_veh_id.veh_id");
var veh_name = sel_veh.options[sel_veh.selectedIndex].text;
*/
var node = document.getElementById("evp_footer");
gen_hiddenbox(node, "evp_veh_name", "evp_veh_name", veh_name);
}This is called for call generic dynamically way to make html component using JavaScript
这被称为动态调用通用方式来使用 JavaScript 制作 html 组件
回答by Azodious
You can define your methods as follows:
您可以按如下方式定义方法：
addRow(var rowCount)
{
for(var i=0; i<rowCount; i++)
{
// Your current implementation to add a row
}
}
Similarly, deleteRow(var rowCount)can be defined.
同理，deleteRow(var rowCount)可以定义。
