javascript - Javascriptを使用してhtmlテーブルに複数の行を動的に追加する

Question

テーブル（html）に単一の行を追加し、JavaScriptを使用して削除するのは簡単です。しかし、addrow関数を1回だけ呼び出すことで、2つ以上のように複数の行を追加することは可能ですか？追加された行にはさまざまな要素があります。たとえば、最初の行にはテキストフィールドがあり、他の行にはテキストエリアがあります。

それを行うためのHTMLの他の選択肢はありますか？

Answer 1

私はこれに似たコードを書くことによって自分でそれを解決しました：

3つの行を追加します。最初はテキストフィールド、2番目はテキストエリア、3番目はボタンです。

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要素がテーブルに追加されるため、それぞれが異なる要素を持つ3つの行が動的に追加されます。

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コンポーネントを作成するためのジェネリック動的な方法を呼び出すために呼び出されます