将输入文本提交为表格

Question

我已经在网上寻找了很长时间，但我还没有找到似乎很常见的答案。

基本上我想做的是提交输入文本，也许还检查单选按钮或类似的东西是否被选中以在表中作为文本弹出，这是输入和表的一些照片。

我希望能够按下“ +”或“添加”按钮，并将输入中的所有文本添加到表格中，并且是否已对所有广播进行了检查（checked = true（类似））当我按下添加按钮时显示在表格中

这是示例照片的HTML：

    <div class="bg">

    <button id="droplist-btn" class="droplist-btn">Add By Droplist</button> 
<form>
    <input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
    <button type="submit" id="add-item" class="add-item">+</button>
    <input type="text" id="color-input" placeholder="color"></input>
    <select type="text" id="sizes-item-code" class="sizes-item-code">
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
        <option value="XLarge">XLarge</option>
        <option value="One Size">One Size</option>
    </select>
    </label>
    <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
    </label>
    <label for="switch">Any Color</label>
    </form>
    <table id="items-table">
        <!--<caption>Task</caption>-->
        <tr>
            <th>Item</th>
            <th>Size</th>
            <th>Options</th>
        </tr>
        <tr>

        </tr>
    </table>
    <label id="item-code-label">Item Code</label>
    <!-- idk what happened here -->
    <label class="radio">.
    <input type="radio" checked="checked" name="radio">
    <span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>

 </div>
<script src="jquery.js"></script>
<script src="items.js"></script>

</body>
</html> 

我试图将下面的两个答案添加到其他脚本中，但它们都不起作用，这是我的另一个表的html：

<table id="proxy-list">
        <tr>
          <!--<th>Name</th> -->
          <th colspan="3">Proxies</th>
        </tr>
        <tr>
          <td>Proxy1:</td>
          <td>174.32.116.214:87</td>
          <td>
            <button class="remove-btn"><div class="thex">x</div></button>
          </td>
        </tr>
      </table>
      <input type="text" id="proxy-add-name" placeholder="Name"></input>
      <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
      <button id="proxy-add" onclick="addProxy()">Add</button>

感谢您的任何帮助，谢谢。

（我知道我的html代码非常混乱，我对html非常了解并且仍在学习中）

（首选jQuery，但正如我所说，这有帮助）

Answer 1

只需更新addRow的开头

function addRow() {
	var item_text = 1; // $('#item-code-input').val() ???
	var size_text = 2;
	var options_text = 3;
	$('#main-table').append('<tr>'
		+'<td>'+item_text+'</td>'
		+'<td>'+size_text+'</td>'
		+'<td>'+options_text+'</td>'
		+'</tr>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main-table">
<tr>
	<th>Item</th><th>Size</th><th>Options</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>

Answer 2

尝试一下。效率不高，但是可以满足您的要求

function add() {
    let table = document.getElementById("theTable")
    let fd = new FormData(myForm)
   
    let output = ""
    for(let data of fd.entries()) {
      output += "<td>"+data[1]+"</td>"
    }
    output = "<tr>"+output+"</tr>"
   
    table.innerHTML += output
}

<form id=myForm>
  <input name="name" value="John" />
  <input name="age" value="32" />
  <input name="lang" value="en" />
  <input type=button onclick="add()" value="+"/>
</form>

<table width="100%" border=1 id="theTable">
  
</table>

Answer 3

这正在使用您的代码-顺便说一句，我为复选框输入添加了id =“ switch”（以链接到for =“ switch”）。对于选项，它仅考虑了“ Any Colour”。 “ +”按钮使其添加行。单击“ +”按钮时，我使用了“ return false”阻止表单提交。

function addRow() {
	var item_text = $('#item-code-input').val();
	var size_text = $('#sizes-item-code').val();
	var options_text = $('#switch').is(':checked') ? 'Any Color' : '';
	$('#items-table').append('<tr>'
		+'<td>'+item_text+'</td>'
		+'<td>'+size_text+'</td>'
		+'<td>'+options_text+'</td>'
		+'</tr>');
}

$(function(){
  $('#add-item').click(function(){
    addRow();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">

    <button id="droplist-btn" class="droplist-btn">Add By Droplist</button> 
<form>
    <input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>
    <button type="submit" id="add-item" class="add-item">+</button>
    <input type="text" id="color-input" placeholder="color"></input>
    <select type="text" id="sizes-item-code" class="sizes-item-code">
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
        <option value="XLarge">XLarge</option>
        <option value="One Size">One Size</option>
    </select>
    </label>
    <label class="switch">
    <input type="checkbox" id="switch">
    <span class="slider"></span>
    </label>
    <label for="switch">Any Color</label>
    </form>
    <table id="items-table">
        <!--<caption>Task</caption>-->
        <tr>
            <th>Item</th>
            <th>Size</th>
            <th>Options</th>
        </tr>
        <tr>

        </tr>
    </table>
    <label id="item-code-label">Item Code</label>
    <!-- idk what happened here -->
    <label class="radio">.
    <input type="radio" checked="checked" name="radio">
    <span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
<input type="radio" name="radio">
<span class="check-keyword"></span>
</label>

 </div>
<script src="jquery.js"></script>
<script src="items.js"></script>

</body>
</html>