输入类型表单中的 innerHTML 值

Posted 2023-05-07

技术标签:

【中文标题】输入类型表单中的 innerHTML 值【英文标题】：innerHTML value in input type Form 【发布时间】：2015-05-08 10:49:22 【问题描述】：

function addRow() 
          
    var SpielerNR = document.getElementById("spielernr");
    var SpielerName = document.getElementById("speilername");
 	var groesse = document.getElementById("groesse");
    var table = document.getElementById("myTableData");
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
    row.insertCell(0).innerhtml= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= SpielerNR.value 
    row.insertCell(2).innerHTML= SpielerName.value 
	row.insertCell(3).innerHTML=  groesse.value
 

 
function deleteRow(obj) 
      
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
    

 
function addTable() 
      
    var myTableDiv = document.getElementById("myDynamicTable");
      
    var table = document.createElement('TABLE');
    table.border='1';
    
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
      
    for (var i=0; i<3; i++)
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);
       
       for (var j=0; j<4; j++)
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       
    
    myTableDiv.appendChild(table);
    

 
function load() 
    
    console.log("Page load finished");

<!DOCTYPE html>
<html>
<head>
    <title>HTML dynamic table using javascript</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body onload="load()">
<div id="myform">
<table>
    <tr>
        <td>NR:</td>
        <td><input type="text" id="spielernr"></td>
    </tr>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="speilername"></td>
    </tr>	
    <tr>
        <td>Select:</td>
        <td>
		<select id="groesse" name="groesse" style="width: 150px">
	 <option> </option>
	 <option value="XXS">XXS  </option>
	 <option value="XS">XS </option>
	 <option value="S">S  </option>
	 <option value="M">M  </option>
	 <option value=" L">L </option>
	 <option value="XL">XL </option></select>
	 </select>
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>NR</b></td>
        <td><b>Name:</b></td>
        <td><b>Grösse</b></td>
    </tr>
</table>
&nbsp;
 
</div>

</body>
</html>

我的问题是，当我添加 NR NAME AND GROESSE.. 我会得到一个计划文本。我需要的是一个输入表格，比如添加的信息。

意思是：在我添加了 Nr NAME 和 GROESE 等所有信息后，我想显示输入表单而不是计划文本。

有什么办法吗？

【问题讨论】：

【参考方案1】：

您已经在代码中多次使用CreateElement() 函数。为什么不使用它来创建您的输入元素？所有这些事情都可以在 Javascript 中完成。也许使用 jQuery 或其他工具来帮助简化您的一些 DOM 操作工作。

这是另一个 *** 问题的示例：

How insert an input field in a table cell?

【讨论】：

查看我创建链接的问题。这几乎就是你需要做的。 OP 的原始代码，使用document.createElement() 而不是cell1[0].createElement()。如果您真的需要比我更清晰的图片，我想我可以将其复制/粘贴到我的答案中。

以上是关于输入类型表单中的 innerHTML 值的主要内容，如果未能解决你的问题，请参考以下文章

使用 INPUT 标签的 VALUE 属性（及其值）读取 HTML 表单的 innerHTML