Question

我正在尝试使用数据库中的内容创建一个表，我可以删除或编辑它。所以我想在每一行的最后一个单元格中创建两个按钮（一个用于删除，另一个用于编辑内容）。

我试过这个：

<td>${test.id}</td>
<td>${test.name}</td>
<td>
  <script>
    var x = document.createElement("INPUT");
    x.setAttribute("type", "submit");
    x.setAttribute("value", "edit");
    x.setAttribute("id", "edit" + $ {
      test.id
    });
    document.body.appendChild(x);
  </script>
</td>
</tr>

但是按钮是在页面顶部创建的......

我是否应该在一个脚本中创建整个表？

Answer 1

我不明白为什么要用javascript创建按钮。像普通一样编写HTML，然后在文档中稍后绑定您的事件。您展示的方法不是必需的，也不是接近它的好方法。

更好的路线是使用事件委派，因此您只将一个事件绑定到表。单击按钮时，您将检查事件的目标，如果是按钮，则相应地执行操作。

无论您使用什么方法进行事件绑定，都没有理由使用javascript来创建元素。下面，我将说明使用委托。

另一个快速说明，如果你要做很多其他的javascript，你可能最好得到像jQuery这样的库。由于你没有表明你有jQuery，下面的代码是＆＃34; vanilla＆＃34;的JavaScript。

＆＃13;

// quickie cross-browser events
function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// bind an event to the table, capture any clicks
addEvent(
    document.getElementById('datatable'),
    'click',
    function (e) {
        var targetElement = e.target;
        
        // we're only worried about clicks on button elements
        if (targetElement.tagName != 'BUTTON')
            return true;

        var id = targetElement.dataset.id;
        // handle edit button click
        if ((' '+targetElement.className+' ').indexOf(' edit-button ') > -1) {
            alert('edit button for #'+id+' clicked');
            return false;
        }
      
        // handle delete button click
        if ((' '+targetElement.className+' ').indexOf(' delete-button ') > -1) {
            alert('delete button for #'+id+' clicked');
            return false;
        }
    }
);

＆＃13;

    <table id="datatable">
        <tr>
          <td>${test.id}</td>
          <td>${test.name}</td>
          <td>
            <button class="edit-button" data-id="{$test.id}">edit</button>
            <button class="delete-button" data-id="{$test.id}">delete</button>
          </td>
        </tr>
      
        <tr>
          <td>${test.id}</td>
          <td>${test.name}</td>
          <td>
            <button class="edit-button" data-id="{$test.id}">edit</button>
            <button class="delete-button" data-id="{$test.id}">delete</button>
          </td>
        </tr>
        <!-- ... etc -->
    </table>

＆＃13;

相关阅读

数据属性 - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
活动简介 - http://www.quirksmode.org/js/introevents.html
活动授权 - http://davidwalsh.name/event-delegate

Answer 2

好的，谢谢大家的帮助，但我自己做了，将它附加到最后一个单元格中：

< script >
  var x = document.createElement("INPUT");
x.setAttribute("type", "submit");
x.setAttribute("value", "edit");
x.setAttribute("id", "edit" + $ {
  test.id
});
document.getElementById("datatable").lastChild.lastChild.appendChild(x); < /script>

Answer 3

稍后您需要一个脚本来附加事件处理程序，但要使代码正常工作：

＆＃13;

<td>${test.id}</td>
<td>${test.name}</td>
<td>
  <input type="submit" value="edit" id="edit${test.id}" />
</td>
</tr>

＆＃13;

在表中使用JavaScript创建元素

3 个答案: