Question

Heyy，我是javascript的新手，我想了解删除和更新按钮的工作原理。我看到很多建议，但我的删除按钮似乎没有工作，我不知道我哪里出错了。请帮忙

  <script type="text/javascript">
        function Delete(object){
            table = document.getElementById("table");
            row = document.getElementById(object);

            table.removeChild(row);
        };
    </script>

    <table id="table" class="table .table-bordered" style="width:50%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>DOB</th>
                        <th>Gender</th>
                        <th>Martial Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Sara</td>
                        <td>1-12-1990</td>
                        <td>Female</td>
                        <td>Married</td>
                        <button>Edit</button>
                        <button onclick="Delete">Delete</button>
                    </tr>
                 </tbody>
             </table>

还有一个问题是，删除按钮显示在表格顶部而不是动作列中为什么？

Answer 1

您需要将元素作为参数传递给Delete()。该元素不是ID，因此您不应该使用getElementById，只需直接访问该元素即可。您可以使用parentElement上移DOM层次结构来查找包含的行和表。

要解决布局问题，您需要将按钮放在<td>内。表格行中的所有内容都必须位于<td>或<th>。

function Delete(object) {
  var row = object.parentElement.parentElement;
  var table = row.parentElement;
  table.removeChild(row);
};

<table id="table" class="table .table-bordered" style="width:50%">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>DOB</th>
      <th>Gender</th>
      <th>Martial Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Sara</td>
      <td>1-12-1990</td>
      <td>Female</td>
      <td>Married</td>
      <td><button>Edit</button></td>
      <td><button onclick="Delete(this)">Delete</button></td>
    </tr>
  </tbody>
</table>

Answer 2

按钮也应该进入表格单元格

'allowedContent' => true

您还必须将click事件更改为如上所示：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarWidgetTheme">@style/AppTheme.WidgetTheme</item>
</style>

<style name="AppTheme.WidgetTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="searchViewCloseIcon">@android:color/transparent</item>
</style>

删除按钮javascript的问题

2 个答案: