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