我正在使用:jquery.dataTables.js 来自:https://datatables.net
我想做的是:
在表 1 的列中删除(或更新)表 2 中的名称后,此 td
的背景应该在更新名称的地方改变颜色。
名称更新后,没有任何反应,只是另一个背景从td
中删除了。来自列名。
我想在 <td>
时应用另一种背景颜色像淡入效果一样更新,显示 td
已更新。
当我将名称放在那里时,还要使下面的 div 出现并显示一条成功消息。
<div class="alert alert-success" >
<strong>Success!</strong> Members Saved.
</div>
希望我解释的很好
这是一个工作示例: http://jsfiddle.net/L3Lhw7jk/3/
CSS:
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;
}
td.name-highlight {
background-color: #73C6B6 !important;
}
.border-highlight {
border-color: #73C6B6 !important;
border-width: 3px;
}
HTML:
<h1>
table 1
</h1>
<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>
jQuery:
$(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 names = $('#example tr td:nth-child(2)');
var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('.name-highlight,input.border-highlight');
if (ctrl.length > 0 && rowCache.length > 0) {
var el = rowCache[0];
var data = el.row.data();
if (data.length > 0) {
if (ctrl.is('input'))
ctrl.val(data[0].name);
else
ctrl.text(data[0].name);
el.row.remove().draw();
names.removeClass('name-highlight');
names.find('input').removeClass('border-highlight');
}
}
rowCache = [];
}
$(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))
});
$row.find('.name-highlight input').addClass('border-highlight');
$row.find('.name-highlight').removeClass('name-highlight');
}
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'));
});
if ($('#example2 .highlight').length > 0)
$row.find('td:nth-child(2)').addClass('name-highlight');
}
});
$(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');
var names = $('#example tr td:nth-child(2)');
names.filter(':not(:has(input))').addClass('name-highlight');
names.find('input').addClass('border-highlight');
}
rowCache.push({
row: r
});
});
});
});
最佳答案
如果一切正确,您只需在 MouseUp 事件中编写用于更改颜色的代码。像这样的东西:
var $td = ctrl.is('input') ? ctrl.parent(): ctrl;
$td.animate({ 'background-color': "#BC8F8F" }, 3000);
对于这种动画,您还必须添加一个 jQuery.ui 库。至于消息,您应该在默认情况下使其不可见 (style="display: none"
),并在同一事件函数的末尾应用如下内容:$('# successMsg').fadeIn(2000).fadeOut(4000);
在此处检查相应的示例:http://jsfiddle.net/jahn08/L3Lhw7jk/9/
关于javascript - Jquery - 数据表拖放更改背景后删除新名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42653929/