jQuery - 向表中添加行,检查表中已有的内容

时间:2018-01-09 00:29:10

标签: javascript php jquery html

我在jQuery / html中遇到了挑战。希望你能指导我。

让我来描述我的情景:

我有一个表格,我可以在按钮点击上添加新行。

每行有两列。每列都有一个选择列表/下拉列表。

第一列有一个模块选择列表:(交货,库存等......) 第二列有一个选择的操作列表:(查看,编辑,删除)

所以基本上它是一个包含用户可以访问/执行的模块和操作列表的表。

这就是我想做的事。例如,我有一行,在第一列(模块)中,它有交付作为值。在第二列(操作)中,它具有查看作为值。

现在,如果我添加了新行,交付值仍应显示在模块列表中,但查看值不应再显示在操作列表中它已被选中。

就像,如果我添加一个新行,它将查找现有值,它将不再显示在列表中。

选择列表(模块和操作)的值来自数据库。

希望我已经清楚地解释了自己。我正在使用PHP和jQuery。请参阅我的代码和表格截图。谢谢,任何帮助和建议将不胜感激。



  $('#add-row').on('click', function(e) {
    e.preventDefault();
     $("#role-detail").each(function () {
       var tds = '<tr>';
       jQuery.each($('tr:last td', this), function () {
          tds += '<td>' + $(this).html() + '</td>';
       });
       tds += '</tr>';
       if ($('tbody', this).length > 0) {
        $('tbody', this).append(tds);
       } else {
           $(this).append(tds);
       }
     });   
  });
&#13;
<a href="" class="btn btn-secondary" id="add-row">Add Row</a>
<table class="table table-bordered table-condensed table-hovered table-striped" id="role-detail">
  <thead>
    <th>Module Name</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control">
          <option>Delivery</option>
          <option>Inventory</option>
        </select>
      </td>
      <td>
        <select class="form-control">
          <option>Add</option>
          <option>Edit</option>
        </select>			  					
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

Table screenshot

0 个答案:

没有答案