CODEWITHSUNDEEP
jqueryvalidation
David Van Staden
David Van Staden

Reputation: 1779

How to act if a field is empty

Good Day

I have a form that dynamically populates data into an html table.

I want to check if the td tags in the tbody are empty or not. If not, I want to display a new button that says: 'done'...or whatever

            <table class="borderClass">
                <thead>
                <tr>
                    <th class="tdProviderHead">Provider
                    </th>
                    <th class="tdCardNoHead">Card Number
                    </th>
                    <th class="tdCostHead">Cost
                    </th>
                </tr>
                </thead>
                <tbody data-bind="foreach: Data">
                    <tr>
                        <td><span data-bind="text: Provider"></span></td>
                        <td><span data-bind="text: CardNo"></span></td>
                        <td><span data-bind="text: 'R ' + Cost()"></span></td>
                    </tr>
                </tbody>
            </table>

Any suggestion?

Upvotes: 0

Views: 117

Answers (5)

Swarne27
Swarne27

Reputation: 5747

Try using,

$(document).ready(function() {
    $('tbody tr td').each(function(){ // use .each function to iterate between td cells
        if($(this).html()==''){   // check whether any of the td cells are empty
            $(this).html('<input type="button" value="Done"/>'); // place a button to the empty td cell
        }
    });
});

html code:

<table class="borderClass">
                <thead>
                <tr>
                    <th class="tdProviderHead">Provider
                    </th>
                    <th class="tdCardNoHead">Card Number
                    </th>
                    <th class="tdCostHead">Cost
                    </th>
                </tr>
                </thead>
                <tbody data-bind="foreach: Data">
                    <tr>
                        <td><span data-bind="text: Provider"></span></td>
                        <td><span data-bind="text: CardNo"></span></td>
                        <td><span data-bind="text: 'R ' + Cost()"></span></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

click here for demo Jsfiddle

or else if you want to check if one of the span tags are empty display a button elsewhere, use the following

$(document).ready(function() {
    var emptySpan = false; // initialize a variable
    $('tbody tr td span').each(function(){
        if($(this).html()==''){
            emptySpan = true; // store the status if you find a empty span tag
        }
    });
    if(emptySpan == true){
    $('#notify').html('<input type="button" value="Done"/>');
    }
});

lets have a div outside the table or anywhere you want,

<div id="notify"></div>

Upvotes: 1

Ajinkya
Ajinkya

Reputation: 22720

$("tbody tr td").length

Will give you the number of td.

You can if check any td is present and display button then 

if($("tbody tr td").length == 0){
  // Do something
}

EDIT : Activity activity = activityManager.getByCode(activityShortCode);Just realized that td will be present but you want to check if they are empty. My solution will not work in such case as it just checks for number of td and not their content. Others have given correct solution, you can try it.

Upvotes: 1

Jai
Jai

Reputation: 74738

You should try with this:

$('tbody tr').each(function(){
   var txt = $(this).find('td').text();
   (txt == '') ? $(this).find('td').text('Done'): return true
});

Upvotes: 0

Masoud Kardani
Masoud Kardani

Reputation: 91

try:

$("table tbody tr td").each(function() {
   if(!$(this).text() || !$(this).html()){

   };
});

or

$.each( $("table tbody tr td"), function() {
   if(!$(this).text() || !$(this).html()){

   };
}

Upvotes: 0

Saad Imran.
Saad Imran.

Reputation: 4530

Something like this might work..

jQuery(document).ready(function(){
    var tds = jQuery("table.borderClass > tbody > tr > td");

    var anyEmpty = false;
    tds.each(function(){
        if(jQuery(this).text() == "")
            anyEmpty = true;
    });

    if(anyEmpty == false || tds.length == 0){
        // show button
    }
});

Upvotes: 2

Related Questions