Сбор данных с помощью jQuery из таблицы - PullRequest
Новая
       25

Сбор данных с помощью jQuery из таблицы

1 голос
/ 18 октября 2011

У меня есть таблица, которая выглядит примерно так: 

<table>
    <thead>
       <tr>
           <th></th>
           <th>Name</th>
           <th>Email</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td class='checkinput'>
                <input type="checkbox" name="names" value="MD5_HASH"/>
            </td>
            <td>
                John Doe
            </td>
            <td>
                email@mail.com
            </td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>

По сути, я пытаюсь создать приложение, в котором вы можете выбрать каждую строку в таблице, которую вы хотите, а затем экспортировать электронные письма в список, разделенный запятыми. У меня проблема в том, как пройти через стол и собрать нужную мне информацию.

В настоящее время для удобства я сделал следующее, чтобы попытаться сделать так, чтобы каждая строка при нажатии переключала флажок. К сожалению, при нажатии непосредственно на флажок ничего не происходит, так как он пытается переключиться при вызове JavaScript, возвращая его туда, где он был: 

$("tr").click(function() {
    var $checkbox = $(this).find(":checkbox");
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

Как я могу оптимизировать это, чтобы он мог щелкнуть сам ввод, и чтобы не возникал этот конфликт?

Кроме того, когда я, наконец, готов к отправке, как пройти через таблицу и прочитать электронную почту из каждой строки, в которой выбран <input>?

Ответы [ 2 ]

2 голосов
/ 18 октября 2011

[Отредактировано для исправления ошибки в первой части из-за недопонимания]

Чтобы предотвратить нежелательное поведение флажка , выйдите из вашего обработчика, если щелчок был прямо на флажке: 

$("tr").click(function(e) {
    if ($(e.target).is(':checkbox')) return;
    var $checkbox = $(this).find(":checkbox");
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

Если событие возникло из флажка, мы позволяем флажку выполнять его поведение по умолчанию. Справочник по обучению .

Чтобы получать электронные письма только с отмеченными строками , вам следует подумать о настройке class="email" на <td>, чтобы впоследствии было легче вносить изменения. Затем используйте что-то вроде этого: 

var emails = [];
$("table tbody tr:has(input:checkbox:checked)").each(function(){
   emails.push( $('td.email', $(this)).text() );
});

Обратите внимание, что вы можете обрезать эту строку, чтобы удалить нежелательные пробелы в начале и конце.

Чтобы узнать об используемых селекторах (:checkbox, :checked и :has) см. Здесь .

0 голосов
/ 18 октября 2011

для проверки первого вопроса внутри функции: 

$("tr).click(function(e) {
if (e.target.id==xxx)      //  if ($('#'+e.target.id).attr('class')=='classssss') ...
....


});

если у него есть идентификатор (или класс - лучше), это флажок, и если да ...

на второй вопрос: 

$(".table tr:gt(0)").each (

function () {

alert($('td:eq(2)',$(this)).text());

}
);
...