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

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

Please help me.

Solution 1:^[1]

What do you mean by empty.

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

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

Solution 2:^[2]

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
}

Solution 3:^[3]

Try this:

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

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

Solution 4:^[4]

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
}

});

Solution 5:^[5]

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"); }

Solution 6:^[6]

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();

                        }

                    });
                }


            });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jitter
Solution 2	T.J. Crowder
Solution 3	Sarfraz
Solution 4	Keith Rull
Solution 5	miku
Solution 6	Hashmat Waziri

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]