1

ボタンを使用して、選択したボタンの前に表示される新しいボタンを作成する方法を理解しようとしています。3 つのボタンと「挿入」ボタンがあります。ボタン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>
4

1 に答える 1

2

「挿入」ボタンをどのように機能させたいかわからない。ただし、以下のコードは機能します。

<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>
于 2013-02-22T23:01:57.213 に答える