使用jQuery实现点击按钮将表格数据插入textarea功能

原代码存在的问题 #

• 按钮type属性错误，应为button而非button1
• 表格标签错误：<body>应为<tbody>
• 文本域存在重复id属性（input_182和textarea），且JS中目标元素ID与HTML不匹配
• 获取表格内容的方式错误：表格元素没有defaultValue属性，应使用innerHTML
• 文本域内容需通过value属性设置，而非innerHTML

修正后的完整代码 #

HTML代码

<button type="button" onclick="myFunction()">Insert table to textbox</button>

<table id="krtable">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>     
  </thead>
  <tbody>
    <tr>
      <td>23:48</td>
      <td>1LARIOS</td>
      <td>260 DRIFWOOD</td>
      <td>NO </td>
    </tr>
    <tr>
      <td>22:32</td>
      <td>WALKER</td>
      <td>1DRIFTWOOD</td>
      <td>NO</td>
    </tr>
    <tr>
      <td>22:30</td>
      <td>WALKER</td>
      <td>1 DRIFTWOOD</td>
      <td>NO </td>
   </tr>
   <tr>
     <td>22:09</td>
     <td>WALKER</td>
     <td>3 DRIFTWOOD</td>
     <td>NO</td>
  </tr>
 </tbody>
</table>

<textarea id="input_182" class="textarea small" rows="10" cols="50"></textarea>

JS代码

function myFunction() {
  // 获取表格的HTML内容
  var tableContent = document.getElementById("krtable").innerHTML;
  // 将内容设置到文本域中
  document.getElementById("input_182").value = tableContent;
}

function myFunction2() { 
  document.getElementById("demo").innerHTML = "testing only";
}

代码说明 #

1. 修正按钮type属性，确保按钮正常触发点击事件
2. 修复表格的<tbody>标签，符合HTML规范
3. 移除文本域重复的id，统一使用input_182，保证JS能正确定位元素
4. 使用innerHTML获取表格的完整HTML结构，通过文本域的value属性设置内容（文本域内容需用value而非innerHTML操作）

内容的提问来源于stack exchange，提问作者privacymx