Develop Reference

jquery datatable edit table row data using form

var tb = $('#example').DataTable();
$('#addRow').on('click', function() {
var typeName = $("#type option:selected").val();
var amount = $("#amount").val();
tb.row.add([typeName, amount]).draw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<label>Type</label>
<select id="type">
<option> Type 01</option>
<option> Type 02</option>
</select>
<label>Amount</label>
<input type="text" id="amount" />
<button id="addRow"> Add </button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
</tr>
</thead>
</table>
i need to append edit and delete button for every row. when click the edit button, row data should load to dropdown and textbox. can u guide me to do this ?

With certain changes to the architecture of your app, I would suggest the following approach that employs native DataTables options and API methods:
//initialize DataTable
const tb = $('#example').DataTable({
//remove non-essential controls for the sake of cleaner view
dom: 't',
//use columns option to setup header titles
columns: [
{title: 'Type'},
{
title: 'Amount',
//user 'render' to append Edit/Delete buttons for each entry
render: data => `${data}<button action="delete">Delete</button><button action="edit">Edit</button>`
}
]
});
//click handler for dual purpose 'Submit' button that adds new rows and submits edits
$('#submit').on('click', function() {
//when submit button acts to append new row to the table (default)
if($(this).attr('action') == 'addRow'){
tb.row.add([$("#type").val(), $("#amount").val()]).draw();
}
//when submit button acts to submit edits
if($(this).attr('action') == 'confirmEdit'){
//change affected row data and re-draw the table
tb.row($(this).attr('rowindex')).data([$("#type").val(), $("#amount").val()]).draw();
}
//clean up form, switch it to default state
$('#type').val("");
$('#amount').val("");
$('#submit').attr('action', 'addRow');
});
//'Delete' button click handler
$('#example').on('click', 'tbody tr button[action="delete"]', function(event){
tb.row($(event.target).closest('tr')).remove().draw();
});
//'Edit' button click handler
$('#example').on('click', 'tbody tr button[action="edit"]', function(){
//get affected row entry
const row = tb.row($(event.target).closest('tr'));
//get affected row().index() and append that to 'Submit' button attributes
//you may use global variable for that purpose if you prefer
$('#submit').attr('rowindex', row.index());
//switch 'Submit' button role to 'confirmEdit'
$('#submit').attr('action', 'confirmEdit');
//set up 'Type' and 'Amount' values according to the selected entry
$('#type').val(row.data()[0]);
$('#amount').val(row.data()[1]);
});
tbody tr button {
display: block;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<label>Type</label>
<select id="type">
<option value="" selected></option>
<option value="Type 01">Type 01</option>
<option value="Type 02">Type 02</option>
</select>
<label>Amount</label>
<input type="text" id="amount" />
<button id="submit" action="addRow">Submit</button>
<table id="example" class="display" cellspacing="0" width="100%"></table>

Add your HTML directly. I've added button, you can similarly add a drop down too. Consider the following:
var tb = $('#example').DataTable();
$('#addRow').on('click', function() {
var typeName = $("#type option:selected").val();
var amount = $("#amount").val();
var row = tb.row.add([typeName, amount, "<span><button>Edit</button><button>Delete</button></span>"]).draw();
var edit = row.node().getElementsByTagName("button")[0];
edit.onclick = function() {
document.getElementById('typeEdit').value = row.data()[0];
document.getElementById('amtEdit').value = row.data()[1];
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<label>Type</label>
<select id="type">
<option> Type 01</option>
<option> Type 02</option>
</select>
<label>Amount</label>
<input type="text" id="amount" />
<button id="addRow"> Add </button>
<br/ >
<br/ >
Edit Type
<select id="typeEdit">
<option> Type 01</option>
<option> Type 02</option>
</select>
Edit Amount
<input id="amtEdit" />
<br/ >
<br/ >
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Ops</th>
</tr>
</thead>
</table>

RowEditor.js
I had a similiar issue and wrote a tiny JS tool, that targets editing of rows inline. The repo can be found here. I think its functionality is best described by the picture below, but you can also find a running example here.
Setting it up
What you have to do to integrate it, is
Download and integrate the file
<script type="text/javascript" charset="utf8" src="/js/RowEditor.js"></script>
Set up a configuration about which columns shall be editable and if they should be editable as dropdown or input (compare it to the example picture, you will quickly figure out what it does):
"1":{"type":"input"},
"2":{"type":"input"},
"3":{"type":"select",
"options":{
"1":{"value":'Sales Assistant', "title":'Sales Assistant'},
"2":{"value":'Tech Lead', "title":'Tech Lead'},
"3":{"value":'Secretary', "title":'Secretary'},
"4":{"value":'Developer', "title":'Developer'},
"5":{"value":'Trainee', "title":'Trainee'}
}
}
}
Call the editor, after you have initialized your DataTable:
$(document).ready( function () {
table = $('#table').DataTable();
rowEditor = new RowEditor('#table', table, editRowSettings);
});
Call the function editRow of rowEditor (or however you have named it above) with the index of the row you want to edit. I have the button placed in a sepperate column of the datatable, but you can call it anyway you want it.
<button onclick="rowEditor.editRow(1)">Edit</button>
If you have questions, feel free to ask or issue a pull request :)

Jquery append new data to old ones has duplicate issue

How can I add new data to old ones without duplicate my tables?
logic
I select option, data returns in table
I select different option, data adds to old ones
Issue
When I do second part of my logic it add new table as well, meaning based on how many times i change my selected option it adds new tables.
Screenshot
when i select my first option having 1 table
when i select my second option having 2 tables
What I want
What I want is when i select my second/third etc. option image 2, only have 1 table include data of all those past and current options and not to make 1 table for each of them.
Code
HTML
<div class="mt-20 options"></div>
JavaScript
<script>
$(function(){
$('select[name="options"]').on('change', function() {
var addressID = $(this).val();
if(addressID) {
$.ajax({
url: '{{ url('admin/getoptions') }}/'+encodeURI(addressID),
type: "GET",
dataType: "json",
success:function(data) {
// $('div.options').empty();
$('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>'+
'<table id="table" class="table table-bordered table-hover table-responsive">'+
'<thead>'+
'<th width="50" class="text-center">Check</th>'+
'<th class="text-center">Title</th>'+
'<th class="text-center">Price</th>'+
'</thead>'+
'<tbody></tbody>'+
'</table>');
// 2. Loop through all entries
var keys = ['title'];
data.forEach(function(row) {
var $row = $('<tr />');
$row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row['id']+'"></span></label></td>');
keys.forEach(function(key) {
$row.append('<td>' + row[key] + '</td>');
});
$row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');
$('#table tbody').append($row);
});
}
});
}else{
$('div.options').empty();
}
});
});
</script>
Any idea?

Here are the steps to take:
Remove the $('div.options').append( ... ) call
Add the following HTML to your static div element, and hide it with style="display:none":
<div class="mt-20 options" style="display:none">
<div class="mb-20"><h4>Check mark your needed options only</h4></div>
<table id="table" class="table table-bordered table-hover table-responsive">
<thead>
<th width="50" class="text-center">Check</th>
<th class="text-center">Title</th>
<th class="text-center">Price</th>
</thead>
<tbody>
</tbody>
</table>
</div>
Add code after the data.forEach loop, to unhide the div:
$('#table tbody').append($row);
}); // end of loop
$("div.options").show(); // <---

First you need to build your table once. But you are appending new tables every success call. That happens in the line:
$('div.options').append('<div class="mb-20">...
That append is actually creating the table and appending it to the div.
Instead you should create the table only one time before the success callback, then just update it with the new data.
$(function(){
var updateTable = function() {
var addressID = $(this).val();
var data = JSON.parse(addressID);
// show the table div
$('div.options').show();
// clear old rows
$('tbody', myTable).empty();
// 2. Loop through all entries
var keys = ['title'];
data.forEach(function(row) {
var $row = $('<tr />');
$row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row+'"></span></label></td>');
keys.forEach(function(key) {
$row.append('<td>' + row[key] + '</td>');
});
$row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');
$('tbody', myTable).append($row);
});
};
// create and save table for later manipulations
var myTable = $('<table class="table table-bordered table-hover table-responsive">'+
'<thead>'+
'<th width="50" class="text-center">Check</th>'+
'<th class="text-center">Title</th>'+
'<th class="text-center">Price</th>'+
'</thead>'+
'<tbody></tbody>'+
'</table>');
// append h4
$('div.options').append('<div class="mb-20"><h4>Check mark your needed options only</h4></div>');
// append the table
$('div.options').append(myTable);
// select event
$('select[name="options"]').on('change', updateTable);
updateTable.call($('select[name="options"]').first());
});
{"d":4,"e":5,"f": 6}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="options">
<option value="[1,2,3]">Data1</option>
<option value="[4,5,6]">Data2</option>
</select>
<div class="options"></div>

Script to run for all Table Row IDs

I have an HTML table with a date input field which currently runs an AJAX script when the date is modified. This is working well, but I now need another version of the script that acts on all table rows on the page to save the user from having to enter the date for each table row (there could be 20 on the page).
I've created another input for marking all the rows but stumped as to how to implement this. Ideally I'd like to pass an array of the table row IDs (e.g. id="61851") to a new script which calls a PHP script that handles the backend updating.
Here's my table:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.uk.min.js"></script>
<div class="col-md-8">
<h1>Items List</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="col-md-6">
<table class="table table-bordered">
<tr>
<td>Flag All Received:</td>
<td><input type="text" class="form-control datepicker" name="dateReceivedAll" id="dateReceivedAll" data-date-format="dd/mm/yyyy" placeholder="Date Received"></td>
<td class="text-center">
<button type="submit" class="btn btn-success">Date Received All</button>
</td>
</tr>
</table>
</div>
<!-- /.col-md-6-->
<div class="col-md-6">
</div>
<!-- /.col-md-6-->
</div>
<!-- /.col-md-8-->
<div class="col-md-4">
</div>
<!-- /.col-md-4-->
</div>
<!-- /.row-->
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th class="text-center" scope="col">Item Tag</th>
<th class="text-center" scope="col">Serial Number</th>
<th class="text-center" scope="col">Received Date</th>
</thead>
<tbody>
<tr id="61851">
<td>61851</td>
<td>DTZ452432DDF</td>
<td id="61851"><input type="text" id="61851" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
</tr>
<tr id="61852">
<td>61852</td>
<td>GZF2452542DA</td>
<td id="61852"><input type="text" id="61852" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
</tr>
<tr id="61853">
<td>61853</td>
<td>TRA3241234ZZ</td>
<td id="61853"><input type="text" id="61853" class="form-control datepicker" autocomplete="off" placeholder="Date Rec'd" data-date-format="dd/mm/yyyy" name="dateReceived" value=""></td>
</tr>
</tbody>
</table>
</div>
and here's the current script that runs when you modify an individual date in the last column:
$(document).ready(function() {
$(".form-control.datepicker").change(function() {
var recid = $(this).closest('td').attr('id');
var dateReceived = $(this).val();
// Create a reference to $(this) here:
$this = $(this);
$.post('updateItem.php', {
recid: recid,
dateReceived: dateReceived
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating the Date Received - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('td').addClass("has-error");
$("#dateReceivedErrorMessage").html(errorAlert);
$("#dateReceivedError").show();
return; // stop executing this function any further
} else {
$this.closest('td').addClass("has-success")
$this.closest('td').removeClass("has-error");
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating the Date Received - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('td').addClass("has-error");
$("#dateReceivedErrorMessage").html(ajaxError);
$("#dateReceivedError").show();
});
});
});
I've added the Date Received All button and separate input field to capture the date all items were received, just not sure how to have that button trigger a similar version of the current JS but this time pass an array of all the id's?

change your change event , initialize event as per below method.
$(document).on("change",".form-control.datepicker",function(){
var recid = $(this).closest('td').attr('id');
var dateReceived = $(this).val();
// Create a reference to $(this) here:
$this = $(this);
$.post('updateItem.php', {
recid: recid,
dateReceived: dateReceived
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating the Date Received - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('td').addClass("has-error");
$("#dateReceivedErrorMessage").html(errorAlert);
$("#dateReceivedError").show();
return; // stop executing this function any further
} else {
$this.closest('td').addClass("has-success")
$this.closest('td').removeClass("has-error");
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating the Date Received - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('td').addClass("has-error");
$("#dateReceivedErrorMessage").html(ajaxError);
$("#dateReceivedError").show();
});
});

$('#sucess-btn').click(function(){
var ans = $('.table-condensed>tbody>tr').map(function(c,i,a){
return $(i).attr('id');
});
//ans is an array with numbers
});
Add this to your click event and ans array will have the IDs of the rows of the table. Add IDs to both table and the button and it will be easier to select the elements from the DOM.

Update a HTML table record via jQuery

I have created a form with only three inputs, a HTML table and a submit button
<div class="form-group">
<input type="text" id="inputText1" required>
<input type="text" id="inputText2" required>
<input type="text" id="inputText3" required>
</div>
<button type="button" class="btn btn-default" id="submit">Submit</button>
</form>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed" id="myTable" style="width:90%; margin:0 auto;">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
that works this way:
every time the user clicks the submit button the HTML table adds to its rows the value of the inputs via jQuery + two linkbuttons and the variable cont specified as a number in a hidden element in order to easily locate the row when it comes to update it.
$(document).ready(function () {
var cont=0;
$("#submit").click(function(e) {
e.preventDefault();
cont++;
var id = $("#inputText1").val().toLowerCase();
var lastname = $("#inputText2").val();
var name = $("#inputText3").val();
if (checkId(lastname)) {
return alert('El ID ya ha sido especificado');
}
$('#myTable tbody').append('<tr><td for="id">' + id + '</td><td for="lastname">' + lastname + '</td><td>' + name + '</td><td id="cont" style="visibility:hidden">' + cont + '</td><td>Modificar Eliminar</td></tr>');
$("#inputText1").val('');
$("#inputText2").val('');
$("#inputText3").val('');
$('#inputText1').focus();
});
});
the submit button works OK the problem is when I want to modify a row, what I do now is to populate the inputs with the values of the row selected in order to let the user to modify its content but I cannot retrieve the value of the variable cont that represents an specific and different number for each row and besides of that I don't know how to update the table's row once the user decide to update the record, could you please help me, this is the jQuery code I had for the moment
$(document).ready(function () {
$("#myTable").on('click', '#select', function (e) {
e.preventDefault();
var currentRow = $(this).closest("tr");
//var contador= currentRow.$("#cont").val();
//alert(contador);
//doesn't retrieve neither show anything
var col1 = currentRow.find("td:eq(0)").text();
var col2 = currentRow.find("td:eq(1)").text();
var col3 = currentRow.find("td:eq(2)").text();
$("#inputText1").val(col1);
$("#inputText2").val(col2);
$("#inputText3").val(col3);
});
});
and also would like to dd that when the user add the info from the inputs to the table, theres a gap where the hidden field is
how could I solve this?

Drop down list works only the first time when I click then it doesn't change the value

I have a script that should automatically change the value when drop down list selection is changed, and it works first time I change the value, but second time it does not work (after I try to select different value from the one I selected previously)
Here is the HTML:
<input id="search" placeholder="Search..." type="text"/>
<label for="showbrand" class="filter">Brand:<select id="showbrand" data-bind=''>
<option value="">--select--</option>
<option value="">All</option>
</select></label>
<label for="showfrom" class="filter">From:<input type="date" id="showfrom"></label>
<label for="showto" class="filter">To:<input type="date" id="showto"></label>
<a id="filterList" class="btn btn-primary pull-right" onclick="clickFilter();">Find</a><table id="dataTable" class="table table-condensed table-bordered">
<thead>
<tr>
<th>Campaign</th>
<th>Brand</th>
<th>Starts On</th>
<th>Ends On</th>
<th>Files</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="msg"></div>
JS:
$("#showbrand").change(function(){
var info = new Array();
info[0] = $("#showbrand").val();
if($("#showfrom").val() !== '' &&
$("#showto").val() !== ''){
info[1] = 'yes';
}
else{
info[1] = 'no';
}
info[2] = $("#showfrom").val();
info[3] = $("#showto").val();
info[4] = $("#search").val();
listCampaignsFiltered(info, 'dataTable', 0);
});
unction listCampaignsFiltered(info, tableName, limit){
var params = "&brand="+info[0]+
"&daterange="+info[1]+
"&from="+info[2]+
"&to="+info[3]+
"&limit="+limit+
"&search="+info[4];
$.getJSON(LOCAL_URI+"?action=campaignfiltered"+params, function(result) {
//console.log(JSON.stringify(result));
$('#'+tableName+" tbody").html('');
if(result.length > 0){
$("#msg").html(result.length+ " Records found.");
$.each(result, function(){
var $tr = '<tr><td>'+ this.campaign + "</td><td>"+
this.brandName+"</td><td>"+this.startson+
"</td><td>"+ this.endson +"</td></tr>";
$('#'+tableName+" tbody").append($tr);
});
}
else{
$("#msg").html('No records found.');
}
});
}

For your select element to change, you might need distinct values, otherwise no matter what you choose as your option, it'll always have the same value.
I've never setup a select element without values so I'm not 100% sure this is your issue. Please let me know if this happens to be the issue, otherwise I'll remove the answer.
Also, your JS needs a closing ) to be valid.

Yes you should assign the value in dropdown and also correct your syntax in jquery.
I think below code will help you
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$("#showbrand").change(function () {
var info = new Array();
info[0] = $("#showbrand").val();
alert(info[0]);
});
});
</script>
<label for="showbrand" class="filter">Brand:
<select id="showbrand" data-bind=''>
<option value="1">--select--</option>
<option value="2">test</option>
<option value="3">All</option>
</select>
</label>