Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Adding a hidden div to each row in a table

Posted on 2016-11-21
Last Modified: 2016-11-21
Hi everybody.
I have a table built through DataTables plugin and I need to attach to each row a div in order to get an effect similar to the one you have in mobile gmail app.
More precisely, I want that when user long presses on a row, the hidden div becomes visible hiding the row and occupyig the exact same space: in the hidden div I have the button to deete that row.

This is the code to build the table:
function fillTable() {
	setTimeout(function () {
		if ($.fn.dataTable.isDataTable('#grid')) {
			t = jQuery('#grid').DataTable();
		} else {
			t = jQuery('#grid').DataTable({
				"initComplete": function () {
					var api = this.api();
					if (!(api).data().count()) {
						jQuery('#grid thead tr th').addClass('not-arrow');
					} else {
						jQuery('#grid thead tr th').removeClass('not-arrow');
				"ajax": {
					"url": baseurl + "data.php?user_id=" + user_id
				"initComplete": function () {
					$('#grid tbody tr').each(function(){
						$(this).append('<div class="td-buttons" >Delete</div>');
				aoColumns: [
						"mData": 0,
						"mRender": function (data, type, full) {
							return '<div class="user"><a class="avatar" href="#"><span><img class="img-circle" src="' + baseurl + full[0] + '" alt=""></a></span><span class="username"><a href="#">' + full[2] + ' ' + full[1] + '</a></span></div>';
						"mData": 1,
						"mRender": function (data, type, full) {
							return full[4];
						"mData": 2,
						"mRender": function (data, type, full) {
							var dt = full[5].split(' ');
							return dt[0] + ' at ' + dt[1];

                // Here I manage the long press using hammer.js
		$('#grid').hammer({domEvents: true}).on('press', 'tr', function () {
			var user_id = $(this).find('div.user').data('id');
			console.log('pressing row ' + user_id);
			console.log('PRESSS DOWN');

		jQuery('#grid_filter label').html(jQuery('#grid_filter label').find('input'));
		jQuery('#grid_filter label input').attr('placeholder', 'Search').css({
			'color': '#969BAA',
			'font-size': '15px'

		jQuery('#grid_filter label input').on('keyup change', function () {
	}, 500);

Open in new window

this produces this markup:
		<tr role="row" class="odd">
			<td class="sorting_1">
				<div class="user" data-id="764">
					<a class="avatar" href="#">
							<img class="img-circle" src="avatar.gif" alt="">
					<span class="username">
						<a href="#">asdg test7</a>
			<td>2016-10-06 at 13:10:40</td>
			<div class="td-buttons">Delete</div>

Open in new window

Here the css for the div:
	position: absolute;
	width: 100%;
	background: #ccc;
	z-index: 3;

Open in new window

The only problem I get is that I can't set the div height in pixels because rows can have different heights depending on content and setting it to 100% it make it fill the page not the row

How can I fix this?
Thank you for your help
Question by:Marco Gasi
  • 4
  • 2
LVL 13

Accepted Solution

F Igor earned 500 total points
ID: 41895912
The DIV you are expecting to insert cannot be a direct child element inside a TR tag (you can create a TD container for that DIV or simply a TD with CSS formatting).

See this fiddle: https://jsfiddle.net/drL8b5g1/1/ for an example.
LVL 31

Author Comment

by:Marco Gasi
ID: 41896045
@F Igor, thank you for your answer.
You example looks good , but it doesn't fit my need. That way I can't emulate gmail mobile app behavior. In gmail you can swipe left a row to delete an email: when you swipe left a colored space is left instead of the row for some seconds then it is deleted.
Well, I dont know swipe here but press, but I need to hide the row replacing it with an element whose wdth and height be equivalent to the row ones and within this elemet I'll put a button for now, but later I'll have to put other things.
So I'm wondering how I can achieve this...
LVL 13

Expert Comment

by:F Igor
ID: 41896373
In the next example you could get some ideas for some of your needs, it contains long-press event emulation (long press on row) and swipe (if supported)   in http://jsfiddle.net/drL8b5g1/4/

The "swipe" event could be used only in mobile views if you add the jQuery Mobile plugin, does not work in desktop.

You can easily find some additional examples to get it fully working starting of this point .
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

LVL 31

Author Comment

by:Marco Gasi
ID: 41896475
Thank you: with a slight modification to your code I get something closer to what I want: https://jsfiddle.net/marqusG/e8c573fu/3/
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 41896477
Thank you
LVL 31

Author Comment

by:Marco Gasi
ID: 41896480
I accepted you answer before to see your last comment. I'm goin to check it right now. Thank you again :)

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question