Выберите строку из таблицы html и отправьте значения onclick кнопки
У меня есть таблица HTML, где мне нужно выбрать строку и отправить ее первый идентификатор ячейки на кнопку, а onclick
кнопки отправить выбранное значение функции в Javascript. Как я могу достичь этого?
test.html:
<table id="table">
<tr>
<td>1 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>2 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
<tr>
<td>3 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>
</tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />
test.js:
var table = document.getElementById('table'),
selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
}
function fnselect(){
var $row=$(this).parent().find('td');
var clickeedID=$row.eq(0).text();
alert(clickeedID);
}
test.css:
td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
.selected {
background-color: brown;
color: #FFF;
}
Это сценарий моей проблемы JSFIDDLE
Мне нужно отправить значение первой ячейки первой строки в функцию javascript. Но когда пользователь выбирает строку и нажимает кнопку "ОК", я должен отправить значение функции. Как это сделать?
Ответы
Ответ 1
$("#table tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
alert($("#table tr.selected td:first").html());
});
Demo:
http://jsfiddle.net/65JPw/2/
Ответ 2
Вы можете получить доступ к первому элементу, добавив следующий код в функцию highlight
$(this).find(".selected td:first").html()
Рабочий код: JSFIDDLE
Ответ 3
проверить http://jsfiddle.net/Z22NU/12/
function fnselect(){
alert($("tr.selected td:first" ).html());
}
Ответ 4
Этот ниже код даст выбранную строку, вы можете проанализировать значения из нее и отправить вызов AJAX.
$(".selected").click(function () {
var row = $(this).parent().parent().parent().html();
});