Выберите конкретную запись из таблицы, используя флажки

0

Я хотел бы, чтобы записи в таблице были выбраны с помощью флажка.

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

      Name      Contact           Country
      Sam       [email protected]      India
      Jane      [email protected]     USA

Часть базы данных не проблема, просто нужно иметь возможность собирать значения, хранящиеся здесь.

  • 0
    Вы что-то пробовали и застряли?
  • 0
    Еще нет. Я совершенно новичок в HTML и не могу понять логику программирования.
Теги:
checkbox

1 ответ

0
Лучший ответ

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

Идея состоит в том, что вы получаете список всех флажков (входных элементов, checkbox типа) в интересующей таблице (html). Оттуда, если ящик помечен, вы узнаете, какой элемент ячейки содержит его. Затем вы обнаружите, какая строка (html) содержит эту ячейку. Затем вы можете использовать коллекцию cells этой строки для получения различных фрагментов данных в этой строке.

HTML

<table id='infoTable'>
    <tr><th>Name</th><th>Contact</th><th>Country</th><th>Selected</th></tr>
    <tr><td>Sam</td><td>[email protected]</td><td>India</td><td><input type='checkbox'/></td></tr>
    <tr><td>Jane</td><td>[email protected]</td><td>USA</td><td><input type='checkbox'/></td></tr>
</table>
<button onclick='showSelected()'>Show selected</button>

Javascript

function showSelected()
{
    // get all checkbox elements that exist in the table of interest
    var checkBoxes = document.querySelectorAll('#infoTable input');

    var i, n = checkBoxes.length;
    var msg = 'Selected items:\n';

    for (i=0; i<n; i++)
    {
        var curCheckbox = checkBoxes[i];
        if (curCheckbox.checked == true)
        {
            var containingCell = curCheckbox.parentNode;
            var containingRow = containingCell.parentNode;

            var curName = containingRow.cells[0].innerHTML;
            var curContact = containingRow.cells[1].innerHTML;
            var curCountry = containingRow.cells[2].innerHTML;

            msg += curName + ' - ' + curContact + ' - ' + curCountry + '\n';
        }
    }
    alert(msg);
}

Смотрите здесь: http://jsfiddle.net/xphaL/

  • 0
    Работает как шарм. Очень признателен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню