Я хотел бы, чтобы записи в таблице были выбраны с помощью флажка.
Например, если у меня есть таблица, в которой хранятся имя, контакт и страна человека. Я хотел бы иметь возможность выбирать отдельные записи, используя флажки, и иметь возможность отправлять свои значения в базу данных.
Name Contact Country
Sam [email protected] India
Jane [email protected] USA
Часть базы данных не проблема, просто нужно иметь возможность собирать значения, хранящиеся здесь.
Там есть множество способов, которыми вы могли бы справиться с этой задачей. Я приведу один из способов.
Идея состоит в том, что вы получаете список всех флажков (входных элементов, 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/