how to focus a td in a table using jquery?

Question

how to focus a td in a table using jquery? ie, here the focus will be working on Tabel load

function focusco(tableName){
  $(tableName + " td").each(function () {
     var self=this;
     if(data.label==false){
        $(self).trigger('click');
        focus = false;
        return focus;
    }
 }); }

This code will note work

What do you mean with 'focus'? This is actually something specific to input fields... Or do you mean some kind of highlight? — giorgio, Sep 17 '14 at 11:38
@giorgio actually A Table has many tds. On the tabel load the first td has focused — user3487837, Sep 17 '14 at 11:54
@user3487837 ok let me ask it differently... What do you want to achieve? What in your mind means 'focus'? Please illustrate the goal of having a table cell in a so called focused state. — giorgio, Sep 17 '14 at 12:19
@giorgio Ok I have a table with 2 rows. firstly my page load execude focusco function. In the function each td will be execude and satisfied the condition we can focus that td Each td has a text. — user3487837, Sep 17 '14 at 12:40
@user3487837 I still don't have a clue of what you want to achieve... — giorgio, Sep 17 '14 at 13:20
@user3487837 and with that last comment you made me even more confused... Come on, look at your question, and think for yourself if the question is that clear that we can understand what on earth you mean... — giorgio, Sep 17 '14 at 15:54
@giorgio similiar to this link http://stackoverflow.com/questions/10171313/jquery-focusout-event-doesnt-trigger-on-table-element but here is focus on table but i have focused on td on a table — user3487837, Sep 18 '14 at 04:12

score 3 · Answer 1 · answered Sep 17 '14 at 11:38

If you wanna focus a non-focussable element like <td>, use tabindex:

function focusco(tableName){
  $(tableName + " td").each(function () {
     $(this).attr("tabindex", "1");
     var self=this;
     if(data.label==false){
        $(self).trigger('click');
        focus = false;
        return focus;
    }
 });
}

score 1 · Answer 2 · answered Sep 18 '14 at 11:33

Right, what they do in the question you posted in the comments, is just marking a row when it's clicked. That's not really what focus means in webdevelopment... Anyway, they just toggle a css class to achieve the result, like this (click on a table cell to see what it's doing):

jQuery(document).ready(function($) {
    $('td').on('click', function(e) {
        $(this).toggleClass('focus');
    });
});

table { border-collapse: collapse;  }
td, th { border: 1px solid #000; padding: 5px; }
td.focus { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
       <tr>
           <th>id</th>
           <th>name</th>
           <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Pete</td>
            <td>pete@gmail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>john@live.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bill</td>
            <td>bill@yahoo.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Dave</td>
            <td>dave@gmail.com</td>
        </tr>
    </tbody>
</table>

then change the document ready event to window load event, and alter the javascript accordingly, or try at least to explain what you really want... I give up... — giorgio, Sep 18 '14 at 12:07

score 0 · Answer 3 · answered Sep 17 '14 at 11:55

0

By focus i guess, you want the user to look at it?? For doing that one could change the background color, or add border or change text color or some DOM manipulation to attract attention from user for the particular <td>

answered Sep 17 '14 at 11:55

Panther

8,938
3
23
34

how to focus a td in a table using jquery?

3 Answers3