Как выбрать строку из динамической таблицы на событие мыши - PullRequest
Новая
       29

Как выбрать строку из динамической таблицы на событие мыши

0 голосов
/ 12 мая 2011

Как получить значение строки по щелчку мыши или checking the checkbox preferably из приведенной ниже HTML-таблицы?

Вот js для получения значений для моей таблицы из XML с использованием spry 

var ds1 = new Spry.Data.XMLDataSet("xml/data.xml", "rows/row"); 
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize: 10 , forceFullPages:true, useZeroBasedIndexes:true});
var pvInfo = pv1.getPagingInfo();

Вот область Div с spry, содержащая таблицу, которая заполняется из pv1 (см. Часть js) 

<div id="configDiv" name="config" style="width:100%;" spry:region="pv1">

    <div spry:state="loading">Loading - Please stand by...</div>
    <div spry:state="error">Oh crap, something went wrong!</div>

    <div spry:state="ready">

    <table id="tableDg" onclick="runEffect('Highlight', 'trEven', {duration: 1000, from: '#000000', to: '#805600', restoreColor: '#805600', toggle:true}, 'Flashes a color as the background of an HTML element.')"
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB"> 
         <th width="2%"><input id="chkbHead" type='checkbox' /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="email"><b>Email</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="pv1">   
     <tr class="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF"> 
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{email}</td> 

     </tr> 

     <tr class="trEven" name="trEven" id="trEven"
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;"> 
         <td><input type="checkbox" class = "chkbCsm"></input></td>
         <td id="tdname" width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{email}</td> 

     </tr>
     </tbody>
     </table> 
     </div>
     </div>

Я пробую приведенный ниже код, но все равно не получаю оповещение, и, следовательно, ни один из ответов также не работает. Я знаю синтаксис n все все правильно, но я не могу понять, в чем здесь проблема! 

//inside $(document).ready(function()
$("#chkbHead").click(function() {
    alert("Hi");
});

На моей странице есть и другие таблицы для выравнивания содержимого. Поэтому, когда я использую приведенный ниже код, он отлично работает с этими таблицами, за исключением той, что в вопросе. Это может быть проблемой, потому что в таблице только 2 tr, которая заполняется набором данных spry и, следовательно, не идентифицируется должным образом. Может быть, я не уверен, просто пытаюсь помочь улучшить мое понимание 

$('tr').click(function() {
    alert("by");
});

Ответы [ 3 ]

2 голосов
/ 12 мая 2011

Значения строки, которую вы получите: 

$('#tableDg tbody tr').live( 'click', function (event) {
    $(this).find('td').each( function( index, item ) {
       if ( $(this).has(':checkbox') ) {
          alert( $(this).find(':checkbox').val() );
       } else {
          alert( $(this).text() );
       }
    };
});
1 голос
/ 12 мая 2011

Что именно вы подразумеваете под значением строки таблицы?Вы можете получить внутренний html строки таблицы следующим образом: 

var html = '';
$('tr').click(function() {
    html = $(this).html();
});

Вы можете получить атрибуты строки таблицы (например, это Id) следующим образом: 

var id = '';
$('tr').click(function() {
    id = $(this).attr('id');
});

В качестве альтернативы вы можетеполучить значение вложенных элементов, таких как текстовый ввод, следующим образом: 

var text = '';
$('tr').click(function() {
    text = $(this).find('#myTextBox').val();
});

РЕДАКТИРОВАТЬ

Это как изменить проверенный атрибут флажка, вложенного встрока таблицы: 

$('tr').click(function() {
    $(this).find('input:checkbox').attr('checked', 'checked');
    // alternatively make it unchecked
    $(this).find('input:checkbox').attr('checked', '');
});

РЕДАКТИРОВАТЬ

Поскольку строки таблицы загружаются динамически - метод привязки события $ (). click () не будет работать, так каккогда вы вызываете его - строки таблицы не существуют, поэтому событие click не может быть связано с ними.Вместо использования $ (). Click используйте живой метод jQuery: 

$('tr').live('click', function() {
    // do stuff
});

Это связывает событие click со всеми строками текущей таблицы и всеми строками таблицы, которые могут быть добавлены в будущем. См. Документы jQuery здесь

0 голосов
/ 23 мая 2012

Вы должны использовать Spry Observer , что-то вроде этого: 

function funcObserver(notificationState, notifier, data) {
    var rgn = Spry.Data.getRegion('configDiv');
    st = rgn.getState();
    if (notificationState == "onPostUpdate" && st == 'ready') {
        // HERE YOU CAN USE YOUR JQUERY CODE
        $('#tableDg tbody tr').click(function() {
            $(this).find('input:checkbox').attr('checked', 'checked');
            // alternatively make it unchecked
            $(this).find('input:checkbox').attr('checked', '');
        });
    }
}
Spry.Data.Region.addObserver("configDiv", funcObserver);
...