单击按钮时将 table 值添加到输入字段

Question

我有一个只存储名称的数据表。我想要一个按钮，将 DataTable 中的所有名称添加到文本输入字段。

    <div id="myTabDiv">
<table name="mytab" id="mytab1">
  <thead>
        <tr>
            <th>name</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>chris</td>
        </tr>
         <tr>
            <td>mike</td>
        </tr>
    </tbody>
</table>
    <button id="add" >ADD</button>
    <input type="text" id="text">
</div>

单击 "add" 按钮后，我希望名称显示在以逗号分隔的文本字段中。

如果可能的话，如果再次单击按钮，删除名称？

Answer 1

将 id 分配给输入

<input type=text id="textbox"/>

只是循环 table

 var table = document.getElementById("mytab1");
    var textbox=document.getElementById("textbox")
    for (var i = 0, row; row = table.rows[i]; i++) {
       for (var j = 0, col; col = row.cells[j]; j++) {
         if(textbox.value=="")
            {
               textbox.value=row.cells[j].innerText;
            }
         else
            {
               textbox.value+= textbox.value+','+row.cells[j].innerText;
             }
       }  
    }

Answer 2

我在 codepen 上创建了整个解决方案。这是使用的函数：

var clicks = 0;
function csv() {
  var box = document.getElementsByName('text')[0];

  if(clicks === 0){
    var newcsv = "";
    var tds = document.getElementsByTagName("TD");  
    for(var i = 0; i < tds.length; i++)
    {
      newcsv += tds[i].innerHTML;
      if(i != tds.length-1) newcsv += ",";
    }
    box.value = newcsv;
    clicks++;
  }
  else{
    clicks = 0;
    box.value = "";
  }
}

绑定按钮的onclick事件

单击按钮时将 table 值添加到输入字段

Add table values to input field on button click

javascript

datatable

input