Question

我有一个简单的表，其中包含3列，其中包含classes =“code”，“description”，“delete”，该列具有类“delete”是一个复选框类型，以及一个带有class =“savebtn”的按钮。

我需要以下内容：

当用户点击保存时：

Jquery必须验证它有数据的代码列。
如果选中了删除列中的任何单元格，请删除该行。
如果用户检查了删除列警告消息中的所有单元格，该表必须至少有一行，并且不要删除这些行。

这是一个Demo，但它不能与我合作。

我试过的：

$(document).ready(function (){ 
$(".savebtn").bind("click", function(e){
    $('.savebtn').attr('disabled',true);
    $('.table tbody tr').each(function () {
       $(this).find('.code input').each(function () {
           if ($(this).closest("tr").find(".delete input").is(":checked")  && $('.cf-table-block tbody tr').length >=1){
               $('.delete input :checkbox:checked').closest('tr').remove();
               $('.savebtn').removeAttr('disabled');
           }else if($(this).closest("tr").find(".delete input").is(":checked")  && $('.cf-table-block tbody tr').length <2){
               e.preventDefault();
           }else if($('.delete input').prop('checked')==false && ( $(this).val().length>0)){
               $('.savebtn').removeAttr('disabled');
           }else if ($('.delete input').prop('checked')==false && ( $(this).val().length==0)){
               $(this).attr("placeholder", "Please fill this field");
            }
          });
      });
   });
});

Answer 1

首先，您应该看看<thead>中的表格标题和<tbody>中的正文。这将允许您确定与我们的需求相关的行数。

然后创建一个检查要删除的行数组会很好，然后可以将其（通过length）与原始行进行比较。

这是一个例子 - 我已经删除了很多逻辑，因为使用数组存储已检查的行将有助于消除对大量条件的需求。

Here's a fiddle.

修改：Here's a new fiddle我在其中添加了一个按钮，您可以清除/填充最后一行的值，以便进行测试。

Answer 2

这是你想要做的事情的更新。

https://jsfiddle.net/ko55Lbt3/6/

$(document).ready(function (){ 
$(".savebtn").bind("click", function(e){
$('.savebtn').attr('disabled',true);

 if($(".table tr [type='checkbox']:checked").length >= $('.table   tr').length -1)
 {
 alert("all rows can not be deleted");
 return false;
}

$('.table tr').each(function () {




 $(this).find('.code input').each(function () {



if ($(this).closest("tr").find(".delete input").is(":checked")){
if($(this).val().length > 0)
{
  $(this).closest("tr").remove();
  $('.savebtn').removeAttr('disabled');
}
else 
{
      $(this).attr("placeholder", "Please fill this field");
    }
    }
 });
 });
 });
 });

当前代码中的选择器几乎没有问题我已经更正。例如“ tbody ”元素不在哪里， td 不应该有 type 属性。

Answer 3

我已经完成了每次点击的简单计数：

请参阅Fiddle

public class CreateDialog extends Dialog
{
  public CreateDialog(final Shell parentShell)
  {
    super(parentShell);
  }

  @Override
  protected void configureShell(final Shell newShell)
  {
    super.configureShell(newShell);

    newShell.setText("Create Object");
  }

  @Override
  protected void createButtonsForButtonBar(Composite parent)
  {
    createButton(parent, IDialogConstants.OK_ID, "Create", true);
    createButton(parent, IDialogConstants.CANCEL_ID, IDialogConstants.CANCEL_LABEL, false);
 }

  @Override
  protected Control createDialogArea(Composite parent)
  {
    Composite body  = (Composite)super.createDialogArea(parent);

    String [] list = {"e", "e1"};

    Label label = new Label(body, SWT.NULL);
    label.setText("Entry point: ");

    for (String item: list) {
        Button btn = new Button(body, SWT.RADIO);
        btn.setText(item);
    }

    return body;
  }
}

Answer 4

试试这个： https://jsfiddle.net/ersamrow/f7ce7dpj/

<强> HTML：

  $(document).ready(function() {
      // on click "Save"
      $(".savebtn").bind("click", function(e) {
        $('.savebtn').attr('disabled', true);
        var table_rows = $('table tbody').find('tr').length;
        var checked = $('input:checkbox:checked').length;
        if (checked < table_rows) {
          // Delete rows
          $("input:checkbox").each(function() {
            if ($(this).prop("checked")) {
              $(this).closest("tr").remove();
            }
          });
        } else {
          alert("Table must have at least one row!");
        }
        $('.savebtn').attr('disabled', false);
      });
    });

<强>脚本：

{{1}}

如何不允许删除表中的所有行？

4 个答案: