动态字段中的concat字符串

Question

我有以下代码，其中部分功能已完成。 但我接下来需要做的是连接用户在此表单中输入的所有字段。

    	
    		function addRow(tableID) {
    
    			var table = document.getElementById(tableID);
    
    			var rowCount = table.rows.length;
    			var row = table.insertRow(rowCount);
    
    			var cell1 = row.insertCell(0);
    			var element1 = document.createElement("input");
    			element1.type = "checkbox";
    			element1.name="chkbox[]";
    			cell1.appendChild(element1);
    
    			var cell2 = row.insertCell(1);
    			cell2.innerHTML = rowCount + 1;
    
    			var cell3 = row.insertCell(2);
    			var element2 = document.createElement("input");
    			element2.type = "text";
    			element2.name = "txtbox[]";
    			cell3.appendChild(element2);
    		}
    
    		function deleteRow(tableID) {
    			try {
    			var table = document.getElementById(tableID);
    			var rowCount = table.rows.length;
    
    			for(var i=0; i<rowCount; i++) {
    				var row = table.rows[i];
    				var chkbox = row.cells[0].childNodes[0];
    				if(null != chkbox && true == chkbox.checked) {
    					table.deleteRow(i);
    					rowCount--;
    					i--;
    				}
    			}
    			}catch(e) {
    				alert(e);
    			}
    		}
    
    	

 
    
    	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    
    	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    	
    	
    	<TABLE id="dataTable" width="350px" border="1">
    		<TR>
    			<TD><INPUT type="checkbox" name="chk"/></TD>
    			<TD> 1 </TD>
    			<TD> <INPUT type="text" /> </TD>
    		</TR>
    	</TABLE>
 

- ＆GT;例如，如果用户单击添加行4次，则表单将创建4行，而当他单击某个按钮（要制作）时，结果应该是一个大文本区域中所有输入的串联。 提前谢谢你

Answer 1

这里我创建了片段并从输入中读取值，并在按钮点击事件中显示为textarea中的json对象。

＆＃13;

＆＃13;

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name="chkbox[]";
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount + 1;

  var cell3 = row.insertCell(2);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "txtbox[]";
  cell3.appendChild(element2);
}

function deleteRow(tableID) {
  try {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
          table.deleteRow(i);
          rowCount--;
          i--;
        }
      }
      updaterowCount();
  }catch(e) {
    alert(e);
  }
}

function updaterowCount(){
   var table = document.getElementById("dataTable");
   var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var cell=row.cells[1];
        cell.innerHTML=i+1;
       
    }
}

function getValue(){
var table=document.getElementById("dataTable");
var rowCount = table.rows.length;
    var data={};
   for(var i=0;i<rowCount;i++){
       var row=table.rows[i];
       var element=row.cells[2].childNodes[0];
       data[i]=element.value;
   }
   document.getElementById("result").value = JSON.stringify(data);

  // console.log(data);
}

＆＃13;

table{
  border-collapse: collapse;
}

textarea{
  width:100%;
  height:45px;
}

＆＃13;

<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />


<table id="dataTable" width="350px" border="1">
  <tr>
    <td><input type="checkbox" name="chk"/></td>
    <td> 1 </td>
    <td><input type="text" txtbox[]></td>
  </tr>
</table>
<input type="button" value="Click Me" onclick="getValue()"/>
<br>
<br>
<br>
<textarea id="result" col="100" row="4"></textarea>

＆＃13;

＆＃13;

＆＃13;