javascript - 表格中的 HTML 文本框变成标签

Question

我目前有一个表格，其中包含供用户填写的文本框。我还有一个按钮，可将文本框值转换为标签或仅显示字符串。

比方说，表格代码如下所示

<table>
    <tr>
        <td><input type="text" name="box1"></td>
        <td><input type="text" name="box2"></td>
    </tr>

    <tr>
        <td><input type="text" name="box3"></td>
        <td><input type="text" name="box4"></td>
    </tr>

    <tr>
        <td><input type="text" name="box5"></td>
        <td><input type="text" name="box6"></td>
    </tr>
</table>

按钮代码如下所示

<button id="convert">Press me</button>

我按下按钮后，我希望文本框变成文本标签，请问大家有什么办法可以解决这个问题？我不介意使用任何类型的代码，php、javascript 对我来说是更好的选择。

谢谢

Answer 1

将点击事件处理程序附加到按钮，并在回调中迭代并根据值生成标签。

// attach click event handler
document.getElementById('convert').addEventListener('click', function() {
  // get all input element and convert 
  // into array using Array.from or
  // use [].slice.call for older browser
  // and then iterate over them
  Array.from(document.querySelectorAll('table input')).forEach(function(ele) {
    // generate label element
    var label = document.createElement('label');
    // update the html content with input value
    label.innerHTML = ele.value;
    // replace the input element with label
    ele.parentNode.replaceChild(label, ele);
  });
})

<table>
  <tr>
    <td>
      <input type="text" name="box1">
    </td>
    <td>
      <input type="text" name="box2">
    </td>
  </tr>

  <tr>
    <td>
      <input type="text" name="box3">
    </td>
    <td>
      <input type="text" name="box4">
    </td>
  </tr>

  <tr>
    <td>
      <input type="text" name="box5">
    </td>
    <td>
      <input type="text" name="box6">
    </td>
  </tr>
  <table>
    <button id="convert">Press me</button>