Using jQuery, how to check whether a table cell is empty or not?

Question

Please help me.

Related: http://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery — miku, Dec 22 '09 at 11:41

score 10 · Answer 1 · answered Dec 22 '09 at 12:23

10

What do you mean by empty.

//cell maycontain new lines,spaces,&npsp;,... but no real text or other element
$("cellselector").text().trim()=="";

or

//cell has no child elements at all not even text e.g. <td></td>
$("cellselector:empty")

answered Dec 22 '09 at 12:23

jitter

53,475
11
111
124

score 5 · Answer 2 · answered Dec 22 '09 at 11:47

5

You can use CSS selectors with the $ function to get a reference to the cell's element, and then use the html function to see whether it has any contents. For instance, if the cell has an ID "foo":

if ($("#foo").html()) {
    // The cell has stuff in it
}
else {
    // The cell is empty
}

answered Dec 22 '09 at 11:47

T.J. Crowder

1,031,962
187
1,923
1,875

Thank you. But all these works only in IE not in Firefox. I checked it now. – Yaswanth Dec 22 '09 at 12:06
2

Tested and works in IE7, FF3.5, Chrome3, Safari4, and Opera10. Test page: http://pastie.org/753004 Expected output: "foo has contents / bar is empty" Be sure to allow for whitespace; you may want to trim the string returned by `html`. – T.J. Crowder Dec 22 '09 at 12:24

score 1 · Answer 3 · answered Dec 22 '09 at 11:47

1

Try this:

$content = $('#your_cell_id_here').html();

if($content == '')
{
  // yes it is empty
}
else
{
  // no it is not empty
}

answered Dec 22 '09 at 11:47

Sarfraz

377,238
77
533
578

score 1 · Answer 4 · answered Jun 16 '10 at 16:18

You can use the trechnique I posted here

http://www.keithrull.com/2010/06/09/HowToChangeTableCellColorDependingOnItsValueUsingJQuery.aspx

You can use this if you already know the id of the cell you want to check

$valueOfCell = $('#yourcellid').html();

or you can iterate on the cells of the table

$("#yourtablename tr:not(:first)").each(function() {                           
//get the value of the table cell located            
//in the third column of the current row             
var valueOfCell = $(this).find("td:nth-child(3)").html();                          
//check if its greater than zero             
if (valueOfCell == ''){                 
    //place action here
}             
else{                 
    //place action here
}

});

score 0 · Answer 5 · answered Dec 22 '09 at 11:50

0

You could add css classes to your table and its rows and columns, then use jquery selectors to get the table item:

if ( !($('#mytable tr.row-i td.column-j').html()) ) { alert("empty"); }

answered Dec 22 '09 at 11:50

miku

181,842
47
306
310

score 0 · Answer 6 · answered May 19 '22 at 07:36

for datatables, you may use the following

            var missedClockoutDataTable = $("#missedClockoutsDatatable").DataTable({

                "order": [[0, "asc"]],
                "serverSide": true,
                "processing": true,
                responsive: true,
                destroy: true,
                select: true,
                fixedHeader: {
                    header: true,
                    headerOffset: $('#fixed').height()
                },
                buttons: [
                    {extend: 'copy', className: 'ui button'},
                    {extend: 'csv', className: 'ui button'},
                    {extend: 'excel', className: 'ui button'},
                    {extend: 'pdf', className: 'ui button'},


                ],
                dom:
                    "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                "ajax": {
                    "url": "{{url('workplace/dashboard/employees/missed-clockouts')}}",
                    data: function (d) {
                        d.gender = $("#gender").val();
                        d.roles = $("#roles").val();
                    },
                },

                "columns": [
                    {data: 'full_name', name: 'full_name'},
                    {data: 'clock', name: 'clock'},
                    {data: 'in', name: 'in'},
                    {data: 'out', name: 'out'},
                    {data: 'numberofHours', name: 'numberofHours'},
                    {data: 'clockoutReason', name: 'clockoutReason'},
                    {data: 'action', name: 'action'},
                ],

                //when the table has fully loaded, proceed with looping through each row except the first one and then delete the rows if the IN column cell is empty
                "initComplete": function(settings, json) {


                    // if the in type is empty, then hide that row
                    $("#missedClockoutsDatatable tr:not(:first)").each(function() {


//get the value of the table cell located
//in the third column of the current row
                        var valueOfCell = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
                        if (valueOfCell == ''){
                            console.log(222);
                            this.remove();

                        }

                    });
                }


            });

Using jQuery, how to check whether a table cell is empty or not?

6 Answers6