javascript - 使用Javascript在html表中动态添加多行

Question

使用 JavaScript 在表 (html) 中添加单行并删除它很简单。但是，是否可以通过仅调用一次addrow函数来添加多行，例如 2 行或更多行？添加的行将具有不同的元素，例如第一行将具有文本字段，另一行将具有文本区域，就像那样...

html中还有其他选择吗？

Answer 1

我通过编写类似的代码自己解决了这个问题：

添加三行，第一行带有文本字段，第二行带有文本区域，第三行带有按钮

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 元素，因此我动态添加了三行，每行都有一个不同的元素。

Answer 2

您可以按如下方式定义您的方法：

addRow(var rowCount)
{
    for(var i=0; i<rowCount; i++)
    {
        // Your current implementation to add a row
    }
}

同样，deleteRow(var rowCount)可以定义。

Answer 3

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