Question

我正在尝试将悬停效果应用到此jsfiddle：http://jsfiddle.net/f7debwj2/49/

进行测试： 单击表1中行的编辑按钮。

问题： 从表2拖放到表1后得到黑色bg

我要归档的内容：

1 - 而不是输入值获取bg黑色，如果我将鼠标悬停在该单元格中，我想获取此黑色bg。

2 - 在表2中的值丢失后，应该在2秒后执行淡化bg黄色和消失。

＆＃13;

 $(document).ready(function() {
   var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
   var options = [{
     key: 'option 1',
     value: 1
   }, {
     key: 'option 2',
     value: 2
   }, {
     key: 'option 3',
     value: 3
   }];

   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].name);
         el.row.remove().draw();
       }
     }

     rowCache = [];
     $('#example tr td:nth-child(2) input').removeClass('border-highlight');
   }

   $(document).ready(function() {
     var $table = $('#example');
     var dataTable = null;

     $('body').mouseup(mouseUp);

     $table.on('mousedown', 'td .fa.fa-minus-square', function(e) {
       dataTable.row($(this).closest("tr")).remove().draw();
     });

     $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) {
       enableRowEdit($(this));
     });

     $table.on('mousedown', 'input', function(e) {
       e.stopPropagation();
     });

     $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) {
       updateRow($(this), true); // Pass save button to function.
     });

     $table.on('mousedown', '.select-basic', function(e) {
       e.stopPropagation();
     });

     dataTable = $table.DataTable({
       ajax: dataUrl,
       rowReorder: {
         dataSrc: 'order',
         selector: 'tr'
       },
       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'));
     });

     $('#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-envelope-o");
       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();
       $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-envelope-o').each(function(index, button) {
         updateRow($(button), commit);
       });
     }

     function updateRow($saveButton, commit) {
       $saveButton.removeClass().addClass('fa fa-pencil-square');
       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'));
       });

       $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/bXcKDeAbyq?indent=2';
     table = $('#example2').DataTable({
       ajax: url,
       order: [
         [0, "desc"]
       ],
       rowReorder: {
         dataSrc: 'place',
         selector: 'tr'
       },
       columns: [{
         data: 'name'
       }]
     });

     table.on('mousedown', 'tbody tr', function() {
       var $row = $(this);

       var r = table.rows(function(i, data) {
         return data.name == $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');
       }

       rowCache.push({
         row: r
       });
     });

   });

 });

＆＃13;

 

 div.addRow {
  line-height: 45px;
  background-color: #fff;
  padding-left: 10px;
  border-bottom: 1px solid;
  border-top: 1px solid #e5e5e5;
}

tr.highlight td {
  background-color: #D0ECE7 !important;
}

.border-highlight {
  background-color: black !important;
  border-width: 3px;
  color: white;
}

＆＃13;

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"></script>
    <link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

  <table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

<table id="new-row-template" style="display:none">
  <tbody>
    <tr>
      <td>999</td>
      <!-- Use a large number or row might be inserted in the middle -->
      <td>__NAME__</td>
      <td>__COUNTRY__</td>
      <td>
        <i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i>
      </td>
    </tr>
  </tbody>
</table>
<br>
<div class="pull-right">
  <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

<br>
<br>
<h1>
 table 2
</h1>
<br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th> name</th>
    </tr>
  </thead>
</table>

＆＃13;

Answer 1

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


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

样本工作：http://jsfiddle.net/f7debwj2/52/

Jquery bg悬停在标记

1 个答案: