Question

以下是我的HTML表格代码：

<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
<thead>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</thead>
<tbody></tbody>
<tfoot>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</tfoot>

这是我正在使用的JQuery代码：

$(document).on('mouseover', '#datatable-buttons tbody tr', function()
        {
            $(this).addClass('bg-show');
            $(this).mouseout(function()
                {
                    if($(this).hasClass('bg-show'))
                        {
                            $(this).removeClass('bg-show');
                        }
                });

            $(this).children(":last").html("<i class='glyphicon glyphicon-edit edit'></i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'></i>");
        });

    $(document).on('click', '#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit', function()
        {
            var specificValue = $(this).children(":first").text();
            alert("Edit Clicked For "+specificValue);
        });

通过使用此代码，我可以在DataTable的最后一个元素中显示编辑和thrash图标，但是我面临着2个问题。

1。）我想对数据表中存在的每个数据执行特定操作以进行编辑和删除

2。）显示的编辑和删除按钮保持不变，他们不再恢复工资字段中存在的值。

我已经通过JSON格式将数据转储到dataTables中。

请任何帮助表示赞赏。我不知道我的代码缺少的地方。

Answer 1

我在代码中稍微改了一下，但它现在应该做你想要的。

在你的“悬停tr函数”中，你用你的按钮替换了Salary值，我重写了代码，所以它在Salary td之后添加了按钮

在您Edit点击后tr td td i.glyphicon点击您有2 td，即1太多。

还可以使用.closest()获取td中的第一个$(this).closest("tr").children(":first").text();的文字

$(document).on('mouseover', '#datatable-buttons tbody tr', function() {
  $(this).addClass('bg-show');
  $(this).mouseout(function() {
    if ($(this).hasClass('bg-show')) {
      $(this).removeClass('bg-show');
    }
  });

  $(this).children(":last:not(.custom)").after("<td class='custom'><i class='glyphicon glyphicon-edit edit'>edit</i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'>delete</i></td>");
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function() {
  var specificValue = $(this).closest("tr").children(":first").text();
  alert("Edit Clicked For " + specificValue);
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function() {
  $(this).closest("tr").remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </tfoot>

Answer 2

向<tr>添加标识标记中数据的属性。这样，您只需在构建每一行时插入数据中的值即可。

<tbody>
    <tr id="1">
        ...
    </tr>
</tbody>

单击图标（编辑/废纸篓图标）时，可以使用此值来定位要使用的数据。

$("#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit").on("click", function () 
{
    var dataId = $(this)parent("tr").attr("id");

    // Populate data for the edit form and show that form.
}

如何为JQuery dataTables中的每个数据创建动态编辑和删除选项

2 个答案: