Question

我正在试图弄清楚如何使用按钮来创建显示在所选按钮前面的新按钮。有三个按钮和一个“插入”按钮。我希望能够单击按钮1，然后插入并在其前面出现一个新按钮。按钮2和3也会出现同样的情况。

我注意到，使用我的代码单击按钮会自动在表格中的单元格0处创建一个新按钮。我不希望按钮实际上做任何事情，但接受用户输入，“插入”按钮可以将它们放在那里。

请帮助，我被困住了。

我到目前为止的代码是：

<html>
<head>
<title>Button Sequence Creation</title>
<script>
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell();
x.innerHTML="New"
}
</script>
</head>
<body>
<h1>Button Sequence Creation</h1>
<hr>
<table id = "myTable" border="1">
  <tr>
        <td>
    <input type="button" value="button1" name ="button1" onclick="displayResult()"></td>
        <td>
    <input type="button" value="button2" name ="button2" onclick="displayResult()"></td>
        <td>
    <input type="button" value="button3" name ="button3" onclick="displayResult()"></td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert</button>
</body>
</html>

Answer 1

不确定您希望“插入”按钮如何运行。但是下面的代码可以工作。

<html>
<head>
  <title>Button Sequence Creation</title>
  <script>
    function displayResult(obj){
      var firstRow=document.getElementById("myTable").rows[0];
      var newButton = document.createElement('input');
      newButton.type = 'button';
      newButton.value = "New";

      var newTD = document.createElement('td');
      newTD.appendChild(newButton);

      obj.parentNode.parentNode.insertBefore(newTD, obj.parentNode);
    }
  </script>
</head>
<body>
  <h1>Button Sequence Creation</h1>
  <hr>
    <table id = "myTable" border="1">
      <tr>
        <td>
          <input type="button" value="button1" id="button1" name ="button1" onclick="displayResult(this)">
        </td>
        <td>
          <input type="button" value="button2" id="button2" name ="button2" onclick="displayResult(this)">
        </td>
        <td>
          <input type="button" value="button3" id="button3" name ="button3" onclick="displayResult(this)">
        </td>
      </tr>
   </table>
   <br>
   <!--button type="button" onclick="displayResult()">Insert</button-->
</body>
</html>

html和dom按钮序列创建

1 个答案: