Develop Reference

Insert new <td> into a table that fills using data-url?

I generate my table using bootstrap and
<table id="table" data-toggle="table" data-url="url.php?...">
At the end of each row I want to have a button.
I tried this in my js file but don't know if I'm even close
$(document).ready(function () {
function buttons() {
$("#table tr").append(
"<td>Button1</td>" +
"<td>Button2</td>"
);
}
});

The following code will only declare a function doesnot execute it.
function buttons() {
...
}
You need to call it using buttons()
$(document).ready(function () {
function buttons() {
$("#table tr").append("<td>Button1</td>" +"<td>Button2</td>");
}
buttons();
});
Or you could remove the wrapper buttons() function just use it directly inside document.ready()
$(document).ready(function () {
$("#table tr").append("<td>Button1</td>" +"<td>Button2</td>");
});
if you want to select only the <tr> inside body then use tbody before tr because thead also have tr
$(document).ready(function () {
$("#table tbody tr").append("<td>Button1</td>" +"<td>Button2</td>");
});

You don't actually need a function at all:
$(document).ready(function() {
$("#table tr").append("<td>Button1</td><td>Button2</td>");
});

Bootstrap Popover in JQuery Datatable doesn't work after search

I have a HTML table:
<table id="PeopleTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pop</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>Michael</td><td><button class='popoverButton'>Popover</button></td></tr>
</tbody></table>
And I want to use the DataTables plug-in to have search, order and filter functionality. I also want to use Bootstrap to show a popover when the button is clicked, so I've tried this:
var peopleTable = $('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
}).click(function (e) {
$(this).popover('toggle');
e.stopPropagation();
});
}
});
The problem is: when I perform a search, column sorting or any operation with the DataTable, the Popover stops working.
Here is the fiddle if you want to try it.
Is "draw" the correct event to perform this or should I use another one? Am I missing any other thing?

Updated JS fiddle link - https://jsfiddle.net/dxrjm530/4/
You just need to take out your click event of button, because after sorting, it is getting called twice, due to drawcallback method of datatable.
$('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
})
}
});
$('#AddRow').on('click', function(){
var peopleTable = $('#PeopleTable').DataTable();
peopleTable.row.add(
['1',
"David",
"<button class='popoverButton'>Popover</button>"]
).draw();
});
$('table').on('click', function(e){
if($('.popoverButton').length>1)
$('.popoverButton').popover('hide');
$(e.target).popover('toggle');
});

Possible solution: https://stackoverflow.com/a/72850074/979174
const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });

Show/Hide after a div created dynamically

I use this code to show/display Edit link when mouse hovers over the start div. This div however can be created dynamically and when it's created the code below doesn't work.
$(".start").hover(
function() {
timeclock.utils.displayEdit(this)
},
function() {
timeclock.utils.hideEdit(this)
});
I tried the code below but it doesn't work and it looks wrong. How can I implement $(document).on('hover'.....) to hide/show the Edit link as shown above?
$(document).on("hover", ".start",
function() {
timeclock.utils.displayEdit(this)
},
function() {
timeclock.utils.hideEdit(this)
});

hover() is a shortcut for binding mouseenter and mouseout handlers. Your second example doesn't work because on() doesn't take two functions like that. You bind multiple handlers at once using delegated events like this:
$(document).on({
mouseenter: function () {
timeclock.utils.displayEdit(this);
},
mouseleave: function () {
timeclock.utils.hideEdit(this);
}
}, '.start');
Simple example: http://jsfiddle.net/TRcR9/

There are 2 errors in your code.
1. you should use $(this) instead of this. There is a different between this two.
2. you have to bind the hover again whenever a new div is created.

Your syntax is a little off. You can attach multiple event handlers simultaneously using a plain object.
$(document).on({
mouseenter: function(){
timeclock.utils.displayEdit(this);
},
mouseleave: function(){
timeclock.utils.hideEdit(this);
}
}, ".start");
I've created a Codepen example here: http://cdpn.io/dDewi

The syntax you have is a a little off. Here is a jsfiddle with a working example:
HTML:
<div id="container"></div>
CSS:
#edit { display: none; }
Javascript:
$(function() {
$(document).on(
{
mouseenter: function()
{
$('#edit').show();
},
mouseleave: function()
{
$('#edit').hide();
}
},
'.start'
);
$('#container').prepend('<div class="start">Mouse over me <a id="edit" href="#">edit</a></div>');
});

Getting a table row cell value when a specific column is is clicked

I was able to retrieve all row values via table click event and getting its value via event.currentTarget.cells[4].innerText();.
But i would like to apply this if a specific column is clicked only like, when i clicked an ID 21 under Username column. It should alert all the cell values of the row. And then when I clicked the other columns it should not alert.
This is my code. Please inform me if you are having problems the way I ask.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
alert(event.currentTarget.cells[0].innerText);
alert(event.currentTarget.cells[1].innerText);
alert(event.currentTarget.cells[2].innerText);
alert(event.currentTarget.cells[3].innerText);
alert(event.currentTarget.cells[4].innerText);
});
});
</script>
Here is my HTML http://jsfiddle.net/jE5UM/

Try
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
$(this).children().each(function(){
alert($(this).text())
})
});
});
Demo: Fiddle
If you want an array as the result then
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var texts = $(this).children().map(function(){
return $.trim($(this).html())
}).get();
});
});
Demo: Fiddle
Update
$(document).ready(function () {
$('#tableid').on('click', 'tr td:nth-child(2)', function (event) {
var texts = $(this).closest('td').siblings().addBack().map(function(){
return $.trim($(this).html())
}).get();
alert(texts.join())
});
});
Demo: Fiddle

I'd suggest, in the absence of specific HTML and other information:
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var cell = event.target,
values = $(cell).siblings().addBack().map(function(){
return $(this).text();
}).get();
alert(values);
});
});
JS Fiddle demo.
References:
addBack().
get().
map().
on().
siblings().
text().

hiding portion of div jquery sortable widget

I have some markup similar to below, and I am trying to hide the "some_row" TR's.
<div id="sortable">
<table>
<tr><td>Some Title 1</td></tr>
<tr class="some_row"><td><textarea ...></td><tr>
</table>
<table>
<tr><td>Some Title 2</td></tr>
<tr class="some_row"><td><textarea ...></td><tr>
</table>
</div>
Here is what I have tried:
$(function () {
$("#sortable")
.sortable({
helper: function (e, o) {
o.find("#some_row").hide();
return o;
},
start: function () {
$(".some_row").hide();
},
stop: function () {
$(".some_row").show();
}
})
.disableSelection();
});
Initially i started with just start and stop events, then I added helper because the, what i am guessing is a cloned selected row, had a hidden some_row div but the same height.
Anyways, the above works as far as style perfectly, however it appears the widget is still taking into account the original heights of the surrounding divs.
Is there anything I can do to salvage this idea?

You need to call the hide on .somerow before the helper is returned.
The helper is a clone of the original div and what you see being dragged. So when you hide the rows the clone has already been created.
The refresh that runs after start is done to reload the sortable objects to adjust for the new height.
Fiddle Example
$(function () {
$("#sortable")
.sortable({
cursor: 'move',
cursorAt: { left: 0, top: 10 },
helper: function (e, o) {
$(".some_row").hide();
o.find("#some_row").hide();
return o;
},
start: function () {
$( "#sortable" ).sortable( "refresh" );
},
stop: function () {
$(".some_row").show();
}
})
.disableSelection();
});
Also you can define the cursor position when dragging (relative to the helper) and the cursor type that displays when hovering using the cursor and cursorAt options of the jqueryui sortable api