We Keep Coding

how to change the text color of table data in tr.append($("<td>"

I would like to see table data Status text color is red when it is Active and green when it is Inactive.
I tried many different ways but failed. Any helpful suggestions will be appreciated.
Thanks for your time and effort.
How is it possible?
HTML code given below:
<form>
<div class="form-group">
<label for="upload-csvd43">Select Payload csv file</label>
<input type="file" class="form-control-file" id="upload-csvd43" accept=".csv">
</div>
</form>
<button type="submit" class="btn btn-success" id="btn-upload-csvd43">Parse Data</button>
<button type="reset" class="btn btn-danger" onclick="resetpage()" >Reset</button>
<div class="container">
<br><br>
<table class="table table-bordered table-hover table-condensed" id="countryTable">
<thead>
<tr>
<th>Sr.</th>
<th>Date</th>
<th>Data</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
</div>
I used the following script to parse table data. papaparse was used to parse csv file.
<script type="text/javascript">
document.getElementById('btn-upload-csvd43').addEventListener('click', ()=> {
Papa.parse(document.getElementById('upload-csvd43').files[0], {
download: true,
header: true,
complete: function(results) {
let countKey = Object.keys(results.data).length;
var tbody = $("#countryTable > tbody");
tbody.empty();
for (let i=0; i<countKey-1;i++)
{
var raw = results.data[i].Data;
let Status = 'Inactive';
let tp= ((parseInt(raw.slice(1,2),16))>>2) & 0x01;
if (tp)
status = 'Active';
var tr = $("<tr>");
tr.append($("<td>", {
'text': i+1
}));
tr.append($("<td>", {
'text': results.data[i].Timestamp
}));
tr.append($("<td>", {
'text': results.data[i].Data
}));
tr.append($("<td>", {
'text': status
}));
tbody.append(tr);
}
}
}
});
});
function resetpage() {
window.location.reload();
}
</script>

You can check if the status value is Active/Inactive depending on this add required class to the td using 'class': status == "Active" ? "red_color" : "green_color" .
Demo Code :
//this is just for demo...
var results = {
"data": [{
"Data": "12734934394848484415",
"Timestamp": "12:30"
}, {
"Data": "157349343948484844153",
"Timestamp": "11:30"
}]
}
document.getElementById('btn-upload-csvd43').addEventListener('click', () => {
/* Papa.parse(document.getElementById('upload-csvd43').files[0], {
download: true,
header: true,
complete: function(results) {*/
let countKey = 3;
var tbody = $("#countryTable > tbody");
tbody.empty();
for (let i = 0; i < countKey - 1; i++) {
var raw = results.data[i].Data;
let status = 'Inactive';
let tp = ((parseInt(raw.slice(1, 2), 16)) >> 2) & 0x01;
if (tp)
status = 'Active';
var tr = $("<tr>");
tr.append($("<td>", {
'text': i + 1
}));
tr.append($("<td>", {
'text': results.data[i].Timestamp
}));
tr.append($("<td>", {
'text': results.data[i].Data
}));
//check if status is active/incative add required class
tr.append($("<td>", {
'text': status,
'class': status == "Active" ? "red_color" : "green_color"
}));
tbody.append(tr);
}
/*}
}
});*/
});
.red_color {
color: red
}
.green_color {
color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="upload-csvd43">Select Payload csv file</label>
<input type="file" class="form-control-file" id="upload-csvd43" accept=".csv">
</div>
</form>
<button type="submit" class="btn btn-success" id="btn-upload-csvd43">Parse Data</button>
<button type="reset" class="btn btn-danger" onclick="resetpage()">Reset</button>
<div class="container">
<br><br>
<table class="table table-bordered table-hover table-condensed" id="countryTable">
<thead>
<tr>
<th>Sr.</th>
<th>Date</th>
<th>Data</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<br>
</div>

Hide selected option at dynamically form jquery

I need to achieve something like when a user selects an option from one select box the option should be hidden for the other select boxes. When a selected option changes the previously selected option should become available again to the other select boxes. But my code seem like only can work at the static selection box.
var i = 0;
$('.addRow').on('click', function() {
addRow();
$('.s').change(function() {
let value = $(this).val();
$(this).siblings('.s').children('option').attr('disabled', false);
$('.s').each(function() {
$(this).siblings('.s').children('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
})
});
});
function addRow() {
var tr = '<tr class="cb" id="row_' + i + '"><td>';
tr += '<select class="s form-control select2" id="name1_' + i + ' first" name="name[]" >';
tr += '<option id="1">tan</option><option id="2">lim</option><option id="3">vin</option><option id="4">alex</option></select></td>';
tr += '<td><input type="number" name="winlose[]" id="amt1_' + i + '" class="form-control"></td>';
tr += '<td style="text-align:center">-';
tr += '</td></tr>';
i++;
$('tbody').append(tr);
}
$('tbody').on('click', '.remove', function() {
$(this).parent().parent().remove();
});
$('.savebtn').on('click', function() {
$('.listable .cb').each(function(index, item) {
console.log($('#amt1_' + index).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered listable">
<thead>
<tr class="text-center">
<th>name</th>
<th>amount</th>
<th style="text-align:center"><a href="#" class="btn btn-info addRow">+</th>
</tr>
</thead>
<tbody class="text-center"></tbody>
</table>
<button type="button" class="btn btn-primary savebtn">Save</button>

If you want to dynamically update each select, you will need to do a few things:
Have a dynamic list in a data structure
Be able to figure out what is selected
Update (or recreate) the dropdowns when:
a selection is made or
a row is added or
a row is removed
This way you separate the view from the data backing it.
Update: Instead of re-rendering the options for each select, I toggle their "disabled" state.
let rowId = 0;
const options = [
{ id: 1, name: "tan" },
{ id: 2, name: "lim" },
{ id: 3, name: "vin" },
{ id: 4, name: "alex" },
];
function getSelections() {
return $('select.select2')
.map((i, sel) => $(sel).val()).toArray()
.map(id => parseInt(id, 10));
}
function fixSelections() {
const selections = getSelections();
$('select.select2').each((i, sel) => {
let $sel = $(sel), val = $sel.val();
$sel.find('option').each((j, opt) => {
let $opt = $(opt);
if ($opt.val() !== val && selections.includes(parseInt($opt.val(), 10))) {
$opt.attr('disabled', true);
} else {
$opt.removeAttr('disabled');
}
});
});
}
function populateOptions() {
const selections = getSelections();
return options.map(option => {
return `
<option value="${option.id}"
${selections.includes(option.id) ? 'disabled="disabled"' : ''}>
${option.name}
</option>
`;
});
}
function addRow() {
const tr = `
<tr class="cb" id="row_${rowId}">
<td>
<select class="s form-control select2" id="name1_${rowId}_first" name="name[]">
${populateOptions()}
</select>
</td>
<td>
<input type="number" name="winlose[]" id="amt1_${rowId}" class="form-control">
</td>
<td style="text-align:center">
-
</td>
</tr>
`;
rowId++;
$('tbody').append(tr);
}
$('.addRow').on('click', function() {
addRow();
$('.s').change(function() {
let value = $(this).val();
$(this).siblings('.s')
.children('option')
.attr('disabled', false);
$('.s').each(function() {
$(this).siblings('.s')
.children('option[value=' + $(this).val() + ']')
.attr('disabled', 'disabled');
})
});
fixSelections();
});
$('tbody').on('click', '.remove', function() {
$(this).parent().parent().remove();
fixSelections();
});
$('.savebtn').on('click', function() {
$('.listable .cb').each(function(index, item) {
console.log($('#amt1_' + index).val());
});
});
$(document).on('change', 'select.select2', e => fixSelections());
option {
color: #000;
font-style: normal;
font-weight: bold;
}
option[disabled] {
color: #777;
font-style: italic;
font-weight: normal;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-bordered listable">
<thead>
<tr class="text-center">
<th>Name</th>
<th>Amount</th>
<th style="text-align:center"><a href="#" class="btn btn-info addRow">+</th>
</tr>
</thead>
<tbody class="text-center"></tbody>
</table>
<button type="button" class="btn btn-primary savebtn">Save</button>
</div>

My solution was to show and enable all everytime something changes then disable and hide all of the options with same value as the ones selected and re-enable and show the one selected in the current select:
$('.addRow').on('click', function() {
addRow();
$('.s').change(function() { //1
$('.s option').prop('disabled',false);//enable all options //n
$('.s option').show();//show all options //n
$('.s option:selected').each(function(index){// disable and hide all of the current selected values from other select boxes //1 to select boxes n
let value = $(this).val();
$('.s option[value='+value+']').prop('disabled',true);//disable all with same value //select boxes n
$('.s option[value='+value+']').hide();//hide them //select boxes n
$(this).prop('disabled',false);//re-enable the current one //1
$(this).show();//and show it //1
$(this).prop('selected',true);//just to be sure re-select the option afterwards //1
});
});
});

I think you can perform this thing with css check snippet
option:checked { display: none; }
option:checked { display: none; }
<select>
<option>A for Alex</option>
<option selected>B for Billy</option>
<option>C for Cody</option>
<option>D for Danny</option>
</select>

Jquery bg hover into a <td> tag

I am trying apply hover effect into this jsfiddle: http://jsfiddle.net/f7debwj2/49/
to test:
click edit button in the row in table 1.
Problem:
after drag and drop from table 2 to table 1 the get black bg
what I trying to archive:
1 - instead of the input value get bg black, I would like to the td get this black bg if I hover in that cell.
2 - after the value from table 2 dropped should do a fadein bg yellow and dissapear after 2 seconds.
$(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
});
});
});
});
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;
}
<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>

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');
sample working: http://jsfiddle.net/f7debwj2/52/

Making the save button work after editing

That sample below is perfectly working
I can edit and save the rows using the pencil and envelope icons.
What I need is simple: Be able to save the rows after clicking edit using the save button instead of the envelope.
So, If I click to edit, I will be able to save the edit using the save button.
I should be able to save the editing using the button save below the table
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
$(document).ready(function() {
var table;
$("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
table.row($(this).closest("tr")).remove().draw();
})
$("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {
$(this).removeClass().addClass("fa fa-envelope-o");
var $row = $(this).closest("tr").off("mousedown");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value=\"" + txt + "\">");
});
});
$("#example").on('mousedown', "input", function(e) {
e.stopPropagation();
});
$("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
$(this).removeClass().addClass("fa fa-pencil-square");
var $row = $(this).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});
$("#example").on('mousedown', "#selectbasic", function(e) {
e.stopPropagation();
});
var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
selector: 'tr'
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}]
});
$('#example').css('border-bottom', 'none');
$('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');
// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
table.row.add($(rowHtml)).draw();
});
});
div.addRow {
line-height: 45px;
background-color: #fff;
padding-left: 10px;
border-bottom: 1px solid;
border-top: 1px solid #e5e5e5;
}
<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="newRow" style="display:none">
<tbody>
<tr>
<td>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>
</td>
<td>DVap
</td>
<td>
www</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">
<a href="dashboard.html">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</a>
<a href="dashboard.html">
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</a>
</div>

You can move your save functionality to its own function.
function saveRow($saveButton) {
$saveButton.removeClass().addClass('fa fa-pencil-square');
var $row = $saveButton.closest("tr");
var $tds = $row.find('td').not(':first').not(':last');
$.each($tds, function(i, el) {
$(this).html($(this).find('input').val());
});
}
Then call it:
$table.on('mousedown', 'i.fa.fa-envelope-o', function(e) {
saveRow($(this)); // Pass save button to function.
});
$('#btn-save').on('click', function() {
$table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) {
saveRow($(button)); // Pass save button to function.
});
});
Edit
I renamed saveRow to updateRow and added a second paramater (persist).
You can now use this to either save or revert an edit to a row or multiple rows.
I set a data attribute on all input fields called original-text that stores the original text. If you want to cancel, it will use this to revert back to the original text.
Demo
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 }
];
$(document).ready(function() {
var $table = $('#example');
var dataTable = null;
$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: 'place'
}, {
data: 'name'
}, {
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'));
});
}
});
div.addRow {
line-height: 45px;
background-color: #fff;
padding-left: 10px;
border-bottom: 1px solid;
border-top: 1px solid #e5e5e5;
}
<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>

I added a click event on the button to target all envelope icon elements so it will even save multiple rows in 1 click, also removed the a href around the button and gave it an id attribute.
$('#savebutton').on('click', function () {
$.each($('i.fa.fa-envelope-o', $('#example')), function (index, element) {
$(element).removeClass().addClass("fa fa-pencil-square");
var $row = $(element).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});
});
$(document).ready(function() {
var table;
$('#savebutton').on('click', function () {
$.each($('i.fa.fa-envelope-o', $('#example')), function (index, element) {
$(element).removeClass().addClass("fa fa-pencil-square");
var $row = $(element).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});
});
$("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
table.row($(this).closest("tr")).remove().draw();
})
$("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {
$(this).removeClass().addClass("fa fa-envelope-o");
var $row = $(this).closest("tr").off("mousedown");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value=\"" + txt + "\">");
});
});
$("#example").on('mousedown', "input", function(e) {
e.stopPropagation();
});
$("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
$(this).removeClass().addClass("fa fa-pencil-square");
var $row = $(this).closest("tr");
var $tds = $row.find("td").not(':first').not(':last');
$.each($tds, function(i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
});
$("#example").on('mousedown', "#selectbasic", function(e) {
e.stopPropagation();
});
var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
selector: 'tr'
},
columns: [{
data: 'order'
}, {
data: 'place'
}, {
data: 'name'
}, {
data: 'delete'
}]
});
$('#example').css('border-bottom', 'none');
$('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');
// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
table.row.add($(rowHtml)).draw();
});
});
div.addRow {
line-height: 45px;
background-color: #fff;
padding-left: 10px;
border-bottom: 1px solid;
border-top: 1px solid #e5e5e5;
}
<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="newRow" style="display:none">
<tbody>
<tr>
<td>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 3</option>
</select>
</td>
<td>DVap
</td>
<td>
www</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">
<a href="dashboard.html">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</a>
<button id="savebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

Html5 dragging items across and within table cells

I'm using Html5 draggable to drag items into different table cells:
http://jsfiddle.net/d1wnk1bg/6/
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td><span class="event" id="item1" draggable="true">Item 1</span>
</td>
<td><span class="event" id="item2" draggable="true">Item 2</span>
<span class="event" id="item3" draggable="true">Item 3</span>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
$(document).ready(function(){
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
de.appendTo($(this));
};
});
})
The only problem with this approach is that if you drag 'Item 1' into the cell where 'Item 2' and 'Item 3' are, Item 1 gets appended to the end.
How can I modify this so that 'Item 1' can be added before 'Item 2' or between 'Item 2' and 'Item 3'. I tried going down the rabbit hole of nested draggables but gave up pretty quickly, hoping there's an easier way!

I forked the Fiddle and adjusted the code a bit:
http://jsfiddle.net/gL88q17m/1/
$(document).ready(function () {
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
de = $('#' + data).detach();
if (event.originalEvent.target.tagName === "SPAN") {
de.insertBefore($(event.originalEvent.target));
}
else {
de.appendTo($(this));
}
};
});
})
What I did is checking whether the item was dropped directly into the td in which case the dropped element will be inserted after all the other entries or if it was dropped on top of another item in which case the item is inserted just before the item the dropped item was dropped on.
Adding some padding to the td makes it easier to drop an item directly into the td even if there are already 3 items inside.
table th, table td {
width: 200px;
height:70px;
padding: 5px;
}
table span {
display:block;
background-color: #ccc;
border: 1px solid black;
color: fff;
height: 30px;
width: 100%;
}

I have done some changes after reading your comment. Now it is working like a charm. I will recommend reading this.
$(document).ready(function () {
$(".event").on("dragstart",function(event){
var dt = event.originalEvent.dataTransfer;
var node = event.target;
dt.setData('text/html', node.innerHTML);
dt.setData('text/plain',node.id);
event.stopPropagation();
});
$(".event").on("dragend",function(e){
event.preventDefault();event.stopPropagation();
})
$(".row>td").on("dragenter dragover dragleave",function(e){
event.preventDefault();event.stopPropagation();
})
$(".row > td").on("drop",function(event){
var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
var data = $("#"+dragObjId);
var dropTarget = $(event.target).closest("td");
$(dropTarget).prepend(data);
});
})

$(document).ready(function() {
$(".event").on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
var node = event.target;
dt.setData('text/html', node.innerHTML);
dt.setData('text/plain', node.id);
event.stopPropagation();
});
$(".event").on("dragend", function(e) {
event.preventDefault();
event.stopPropagation();
}) $(".row>td").on("dragenter dragover dragleave", function(e) {
event.preventDefault();
event.stopPropagation();
}) $(".row > td").on("drop", functiwww.ta3roof.com / on(event) {
var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
var data = $("#" + dragObjId);
var dropTarget = $(event.target).closest("td");
$(dropTarget).prepend(data);
});
})