We Keep Coding

jQuery datatables - how to grab row value

it's my first question here, but I'm learning from stackoverflow since years now.
In my local application (PHP, MySql, Html, Javascript) I have a jQuery datatable, and in the last column the user can show (as PDF) or delete a row by clicking on an icon (-> uses fontawesome).
The data in the table comes in with Ajax from a JSON file.
Here is the datatable HTML code:
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">customer 1</td>
<td class=" dt-body-center">
<i class="fa fa-search-plus"></i>
<span data-cid="25" data-ordid="223150"><i class="fa fa-trash-alt"></i></span>
</td>
</tr>
...
For deleting a row I formerly started a Javascript function, with an Ajax request doing the needed operations on the database, but I wasn't able to integrate the functionality of deleting the row from my datatable.
Then I changed my strategy starting from the datatable triggering the click event on the icon.
With this I am able to successfully delete the row from the datatable (NOT the database!) but I wasn't able to figure out how to grab the needed ID's for launching the delete operations.
I write these ID's (customer-id: cid, order-id: ordid) in < span data-id=cid, data-ordid=ordid>.
var table1 = $('#myTable1').DataTable();
$('#myTable1 tbody').on('click', 'i.fa-trash-alt', function () {
table1
.row($(this).parents('tr'))
.remove()
.draw();
});
My problem is that I am not able to get the ID's in the < span>. Looking at the (Firefox) debugger I can see them under "(this) - parentElement: span - dataset: DOMStringMap(2) - cid:25 and ordid:223150".
Tried things like: "var cid = table1.row($(this).dataset('cid')" and variants but nothing worked for me and unfortunately my jQuery knowledge is very basic.
Have searched an answer for hours now, but didn't find the solution.
Can someone point me in the right direction please or even give some explanation how to grab a value with jQuery seeing the exact position in the Firefox debugger?

You can try the following code, you can receive event object in listener and then get attributes from it's parent span.
$(document).ready(function(){
var table1 = $('#myTable1').DataTable();
$('#myTable1 tbody').on('click', 'i.fa-trash-alt', function (e) {
//you can get ids from parent span attribute like:
var cId = e.target.parentNode.attributes['data-cid'].value;
var ordId = e.target.parentNode.attributes['data-ordid'].value
alert(cId);
table1
.row($(this).parents('tr'))
.remove()
.draw();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="myTable1">
<thead>
<tr>
<th>title-1</th>
<th>title-2</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">customer 1</td>
<td class=" dt-body-center">
another column
</td>
<td><span data-cid="25" data-ordid="223150"><i class="fa-trash-alt">Delete</i></span></td>
</tr>
</tbody>
</table>

Make a table cell editable by placing input box over td

I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.

For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/

You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>

https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.

If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)

Use JQuery to Unhide Table Rows

I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John

http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery

EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.

jQuery finding child elements of <table>?

I am trying to execute a function for each "tr" child element of my "table" with jquery, but this code does not identify the children. I've used this code for "div" based designs before and it works perfectly if I change the "table" and "tr" tags to "div" but it doesn't run here!
This is simple design:
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<table>
<tr align="center">
<input id="btnSearch" type="button" value="Search" />
</tr>
</table>
And this is jquery:
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").children("tr").each(function(){
alert($(this).text);
});
});
});
jsfiddle:
Note that the alert is run just once! And I have also removed the "tr" for children in my jsfiddle to make the code runnable...
could anyone help me?

The tr elements are not children of table, the are children of tbody (or thead or tfoot). The tbody element is automatically created if you don't specify it. You can figure this out easily for yourself if you inspect the generated DOM.
Long story short, either search for all descendants, with .find
$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")
or include tbdoy in your selector:
$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")
That being said, you also have to add the actual content inside td elements, as noted in the other answers.
If you are new to HTML and tables, read the MDN documentation.

There are 2 problems, an invalid html and the selector is wrong
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
then
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").find(">tbody > tr").each(function () {
alert($(this).text());
});
});
});
Demo: Fiddle

Problems were:
tables automatically have tbody elements inserted into the DOM, so you should not reference TR's as children of a TABLE element.
You referenced a non-existant text property instead of the jQuery text() function.
You probably want to reference the tds anyway (and probably only a specific TD in each row), as returning the text of an entire row (TR) seldom makes sense in HTML.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/TdGKj/1/
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch td:first-child").each(function () {
alert($(this).text());
});
});
});
The #tblSearch td:first-child selector basically says: "Find the element with id=tblSearch then search for any td elements that are the first child of their parent. Note I added a second column of dummy TDs cells to the JSFiddle so you could see this in practice.
There any many selectors for choosing specific children, which will vary based on your specific needs, but that just needs a little research of jQuery selectors

You don't need to use children at all. You can just create a selector -
$('#tblSearch tr td')
WORKING DEMO - http://codepen.io/nitishdhar/pen/Aiwgm
First you need to fix your HTML structure, place the child td elements inside each tr -
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>
Now you can alert each value using this javascript snippet -
$(function () {
$('#btnSearch').click(function () {
$("#tblSearch tr td").each(function(){
alert($(this).text());
});
});
});
Note - This will alert each value separately as you needed.

First of all fix up your html and add the correct tags around the cell data
Then this should do what you're wanting:
$('table#tblSearch tr').children().each(function(){
alert($(this).text());
});

You have multiple problems in the question you provided:
Your HTML is not valid; Place a td element inside each tr
Call the correct jQuery function. Instead of using children('tr'), which it won't find because there are no tr that are children to the table element (only tbody,thead, etc), you will need to call the find() jQuery function (e.g. find('td')) and from there you will be able to get the text of the cell; however, you may also be able to find tr and get text of the whole row in that case.

javascript: Displayed hidden text proper width

I am trying to show hidden content in a tbody with some javascript.
Two problems.
First, I can't get my jsfiddle to work.
The script is working on my server...but it won't work with jsfiddle. I must be doing something stupid but cannot see what.
After solving that the real problem is when it shows the content, it is not displaying it in the same width ie 100% but just length of text. Would appreciate any suggestions about what is wrong here.
http://jsfiddle.net/eSPu7/3/
same code as in fiddle:
html
<table>
<tbody>
<tr style="background-color:blue;width:100%;height:30px;">
<td>This is always here no matter what</td>
</tr>
<tr style="background-color:blue;width:100%;height:30px;">
<td>
Show More
</td>
</tr>
</tbody>
<tbody id="more" style="display:none;">
<tr style="background-color:blue;width:100%;height:30px;">
<td>This is hidden</td>
</tr>
</tbody>
</table>
js:
function showMore() {
alert("hi");
document.getElementById("more").style.display="block";
}
UPDATE:
I updated it so fiddle now works and better illustrates the problem with blue background. The displayed hidden text is not the same width as the other rows in the table.

If you don't really need 2 tbody sections, take a look at this fiddle