javascript - 在多行中应用的 Jquery 类使其仅在一行中应用

Question

问题: 我的问题很简单。

类 input-test 它在多个行中应用。

此类应该只在我正在编辑的行中应用一次。 现在，如果我在多行中单击以编辑 input-test 应用的类，这不应该发生。

测试:

点击表1中的编辑按钮

jsfiddle:http://jsfiddle.net/f7debwj2/56/

j查询:

$(document).ready(function() {
var dataUrl = 'http://www.json-generator.com/api/json/get/bSiXDKRpMy?indent=2';
var options = [
    { key : '1', value : 'n1' },
    { key : '2', value : 'n2' },
    { key : '3', value : 'n3' }
  ];

var rowCache = [];

function mouseUp(event)
{
  var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

  if (ctrl.length > 0 && rowCache.length > 0)
  {
    var el = rowCache[0];
    var data = el.row.data();

    if (data.length > 0)
    {
      ctrl.val(data[0].member);
      el.row.remove().draw();
    }
  } 

  rowCache = [];
  // after dropped cell
  $('#example tr td:nth-child(2) input').removeClass('border-highlight');

  //removing bg of cell
  $('#example tr td').removeClass('name-highlight-hover animated  bounceIn');

  $('#example tr td input').removeClass('animation-examples three animated  bounceIn');

  if ($("#example tr td:nth-child(2) input").hasClass("name-highlight-hover")) {
    $('#example tr td:nth-child(2) input').addClass('input-test');
  //$('#example tr td input').css({"background-color": "yellow", "font-size": "60%"})
  }

}

$(document).ready(function() {
  var $table = $('#example');
  var dataTable = null;

  $('body').mouseup(mouseUp);

  $table.on('mousedown', 'td .fa.fa-minus', function(e) {
    dataTable.row($(this).closest("tr")).remove().draw();
     $('div.alert.alert-success').hide();
    $('div.pull-right.warning').hide();
    $('div.pull-right').hide();
    $('div.alert.alert-danger').fadeIn("slow");
  });

  $table.on('mousedown.edit', 'i.fa.fa-pencil-square-o', function(e) {
    enableRowEdit($(this));
  });

  $table.on('mousedown', 'input', function(e) {
    e.stopPropagation();
  });

  $table.on('mousedown.save', 'i.fa.fa-save', function(e) {
    updateRow($(this), true); // Pass save button to function.
  });

  $table.on('mousedown', '.select-basic', function(e) {
    e.stopPropagation();
  });

  dataTable = $table.DataTable({
         ajax: dataUrl,
        order: [[ 3, "asc" ]],
       "bPaginate": false,
      columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }, {
      data: 'delete'
    }]
  });

  $table.css('border-bottom', 'none')
        .after($('<div>').addClass('addRow')
          .append($('<button>').attr('id', 'addRow').text('Add New Row')));

  // Add row
  $('#addRow').click(function() {
    var $row = $("#new-row-template").find('tr').clone();
    dataTable.row.add($row).draw();
    // Toggle edit mode upon creation.
    enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square-o'));
     $('button.btn.btn-primary').attr('disabled', false);
    $('div.alert.alert-success').hide();
    $('div.alert.alert-warning').fadeIn("slow");
    $('div.pull-right').hide();
    $('div.pull-right.warning').show();
  });

  $('#btn-save').on('click', function() {
    updateRows(true); // Update all edited rows
  });

  $('#btn-cancel').on('click', function() {
    updateRows(false); // Revert all edited rows
  });

  function enableRowEdit($editButton) {
    $editButton.removeClass().addClass("fa fa-save");
    var $row = $editButton.closest("tr").off("mousedown");

    $row.find("td").not(':first').not(':last').each(function(i, el) {
      enableEditText($(this))
    });

    $row.find('td:first').each(function(i, el) {
      enableEditSelect($(this))
    });
  }

  function enableEditText($cell) {
    var txt = $cell.text();
    $cell.empty().append($('<input>', {
      type : 'text',
      value : txt
    }).data('original-text', txt));
  }

  function enableEditSelect($cell) {
    var txt = $cell.text();
       $('button.btn.btn-primary').attr('disabled', false);
    $('div.alert.alert-danger').hide();
    $('div.alert.alert-success').hide();
    $('div.alert.alert-warning').fadeIn("slow");
    $('div.pull-right').hide();
    $('div.pull-right.warning').show();
    $cell.empty().append($('<select>', {
      class : 'select-basic'
    }).append(options.map(function(option) {
      return $('<option>', {
        text  : option.key,
        value : option.value
      })
    })).data('original-value', txt));
}

  function updateRows(commit) {
     $table.find('tbody tr td i.fa.fa-save').each(function(index, button) {
      updateRow($(button), commit);
    });
  }

  function updateRow($saveButton, commit) {
    $saveButton.removeClass().addClass('fa fa-pencil-square-o');
    var $row = $saveButton.closest("tr");

    $row.find('td').not(':first').not(':last').each(function(i, el) {
      var $input = $(this).find('input');
      $(this).text(commit ? $input.val() : $input.data('original-text'));
    });
     $('div.alert.alert-warning').hide();
     $('div.alert.alert-success').fadeIn("slow");
     $('div.pull-right').hide();

      var members = $('#example tr td:nth-child(2)');
      members.filter(':not(:has(input))').removeClass('name-highlight-hover');  

    $row.find('td:first').each(function(i, el) {
      var $input = $(this).find('select');
      $(this).text(commit ? $input.val() : $input.data('original-value'));
    });
  }
});

 $(document).ready(function() {
      var url = 'http://www.json-generator.com/api/json/get/ckoulMvqHm?indent=2';
    table = $('#example2').DataTable({
      ajax: url,
      order: [
        [0, "desc"]
      ],
      rowReorder: {
        dataSrc: 'member',
        selector: 'tr'
      },
      "bPaginate": false,
      columns: [{
        data: 'member'
      }],
             "drawCallback": function(settings) {

                 setTimeout(function() {
                    //dragging
                     $('#example2 tr').draggable({
                         drag: function(event) {

                             var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('#example tr td:nth-child(2),input.border-highlight');

                             $('.name-highlight-hover').removeClass('name-highlight-hover');
                             if (ctrl.length > 0) {
                                 ctrl.addClass('name-highlight-hover animated  bounceIn ');
                                  var members = $('#example tr td:nth-child(2)');
                                  members.filter(':not(:has(input))').removeClass('name-highlight-hover animated  bounceIn');


                             }


                         }
                     });

                 })

             }
    });

    table.on('mousedown', 'tbody tr', function () {
      var $row = $(this);

      var r = table.rows(function (i, data) {
        return data.member == $row.children().first().text();
      });

      if (r[0].length > 0)
      {

        $row.parents('table').find('tr').removeClass('highlight');
        $row.addClass('highlight');
        $('#example tr td:nth-child(2) input').addClass('border-highlight');
        $('#example tr td:nth-child(2) input').addClass('animation-examples three');

        // $row.parents('table').find('tr').removeClass('highlight');
        // $row.addClass('highlight');
        // $('#example tr td:nth-child(2) input').addClass('border-highlight');

        var members = $('#example tr td:nth-child(2)');
        // members.filter(':has(input)').addClass('border-highlight');
        // members.find('input').addClass('border-highlight');  
        members.filter(':not(:has(input))').removeClass('border-highlight'); 




      }     

      rowCache.push({ row: r });
    });

    });

});

Answer 1

行:

$('#example tr td:nth-child(2) input').addClass('input-test');

将类应用于所有行的列。

为了确保您只选择您感兴趣的那个，您需要过滤选择或使用您找到的元素的上下文，即:

$(ctrl).closest("tr").find("td:nth-child(2) input").addClass("input-test");

它采用较早定位的 ctrl，向上移动到它所在的行，然后找到相关的单元格并在该行输入。

要从其他行中删除 input-test，您还可以添加:

$(".input-test").removeClass("input-test");

取决于您是要单选还是多选。