ausführen klicken oder den Fokus in der Tabelle Zeile in jquery

bitte beachten Sie diese codes:

Ich habe eine Tabelle wie diese:

<table class="ArrowNav" cellspacing="0" rules="all" border="1" id="GridView1" style="height:302px;width:692px;border-collapse:collapse;">
    <tr>
        <th class="Id" scope="col">Id</th><th scope="col">"Group</th><th scope="col">Value</th>
    </tr><tr>
        <td align="center" valign="middle">1</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">2</td><td align="center" valign="middle">1</td><td align="center" valign="middle">120</td>
    </tr><tr>
        <td align="center" valign="middle">3</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">4</td><td align="center" valign="middle">2</td><td align="center" valign="middle">90</td>
    </tr><tr>
        <td align="center" valign="middle">5</td><td align="center" valign="middle">2</td><td align="center" valign="middle">105</td>
    </tr><tr>
        <td align="center" valign="middle">6</td><td align="center" valign="middle">3</td><td align="center" valign="middle">300</td>
    </tr><tr>
        <td align="center" valign="middle">7</td><td align="center" valign="middle">4</td><td align="center" valign="middle">123</td>
    </tr><tr>
        <td align="center" valign="middle">8</td><td align="center" valign="middle">4</td><td align="center" valign="middle">110</td>
    </tr><tr>
        <td align="center" valign="middle">9</td><td align="center" valign="middle">5</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">10</td><td align="center" valign="middle">5</td><td align="center" valign="middle">110</td>
    </tr>
</table>

und ich Schreibe ein Skript für die Navigation zwischen den Zeilen :

var SelectedRowIndex;

    $(document).ready(function () {
        $('.ArrowNav tr').first().css('background-color', 'yellow');
        //           $('.ArrowNav tr').first().focus();
        $('.ArrowNav tr:first').first().trigger('click');
        SelectedRow = 0;

        function ResetAllRowColor() {
            $('.ArrowNav tr').each(function () {
                $(this).css('background-color', 'white');
            });
        }

        $('.ArrowNav tr').on('keyup', function (e) {
            ResetAllRowColor();
            switch (e.keyCode) {
                case 40: //Down
                    SelectedRow++;
                    $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                    break;
                case 38: //Up
                    SelectedRow--;
                    $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                    break;
            }
        });

        $('.ArrowNav tr').on('click', function () {
            alert('a');
        });
    });

das problem ist für die Navigation in der Tabelle muss sich auf ihn konzentrieren.Schreibe ich diesen code für das setzen des Fokus: $('.ArrowNav tr').first().focus(); aber es hat nicht funktioniert.Ich habe auch folgenden code schreiben : $('.ArrowNav tr:first').first().trigger('click'); aber click-Ereignis Zeilen nicht ausgelöst.Ich möchte in die Seite laden, ich kann navigieren zwischen Zeilen kaufen Pfeiltasten. wo ist das problem?

jsfiddle

Dank

InformationsquelleAutor Arian | 2012-11-13

Scoping - & Auswahl-Problem.

Click-Ereignis nicht aufgerufen werden, bevor die auf Funktion definiert wurde.

$('.ArrowNav tr').on('click', function () {
    alert('a');
});
$('.ArrowNav tr').eq(0).click();

Den keys Veranstaltung up/down nicht gebunden werden kann, um eine Tabelle, weil eine Tabelle nicht gewinnen konzentrieren. Das Dokument beginnt mit der Fokussierung auf Anhieb, so dass Sie binden können, werden die keyup/down-Ereignis zu.

    $(document).on('keyup', function(e) {
    ResetAllRowColor();
    switch (e.keyCode) {
    case 40:
        //Down
        SelectedRow++;
        $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
        break;
    case 38:
        //Up
        SelectedRow--;
        $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
        break;
    }
});

Ihre arbeiten jsFiddle

Ich Stelle, dass der code unter $('.ArrowNav tr').on('click', function () { aber das laden der Seite kann ich nicht navigieren zwischen den Reihen durch Pfeile ohne cclick.können Sie? Dank

InformationsquelleAutor Ohgodwhy

1

Ihnen auslösen, die Sie auf, bevor Sie jedem Fall darauf eingestellt ist. Sollten Sie
```
$('.ArrowNav tr').first().trigger('click');
```
unter
```
$('.ArrowNav tr').on('click', function () {
    alert('a');
}); 
```
Dann für das andere problem ist, dass Sie können nicht onkey* - Funktionen oder Fokus-Funktionen auf der Tabelle Zeilen/Spalten. Sie können nur Fokus-Elemente, die Eingaben akzeptieren durch den Benutzer.

InformationsquelleAutor Martin

<table>
  <tr tabindex="-1" onkeyup="alert(event);">
    <td>click me</td>
  </tr>
</table>

tabindex geben sollte, die Zeile zu konzentrieren.

InformationsquelleAutor Kernel James

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.