在表格(html)中添加单行并使用JavaScript删除它很简单。但是,是否可以通过仅调用一次 addrow 函数来添加多行,如2或更多行?添加的行将具有不同的元素,例如第一行将具有文本字段,另一行将具有textarea并且类似于...
html中还有其他替代方法吗?
答案 0 :(得分:1)
我自己通过编写类似于:
的代码解决了这个问题添加三行,首先是文本字段,第二行是textarea,第三行是按钮
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++;
}
}
每次 for 循环运行时,表中都会添加一个新的html元素,因此我动态添加了三行,每行都有不同元素。
答案 1 :(得分:0)
您可以按如下方式定义方法:
addRow(var rowCount)
{
for(var i=0; i<rowCount; i++)
{
// Your current implementation to add a row
}
}
同样,可以定义deleteRow(var rowCount)
。
答案 2 :(得分:0)
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;
}
}
&#13;
首先创建通用函数以动态添加按钮,文本框等
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);
}
&#13;
这被称为动态调用泛型方式使用JavaScript生成html组件