#javascript #jquery
#javascript #jquery
Вопрос:
У меня есть таблица с динамически изменяющимися элементами rows.
Среди строк есть маленькая кнопка / ссылка для каждого блока.
Например
Data1 | LinkButton
Data2 | LinkButton
Data3 | LinkButton
Data4 | LinkButton
Data5 | LinkButton
Data6 | LinkButton
Чего я хочу, так это того, что когда я нажимаю на кнопку ссылки, мне нужно знать, какая строка выбрана?Может ли кто-нибудь дать мне указания на то, как это можно сделать?
Мы будем очень признательны за вашу помощь.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" />
</head>
<body><center>
<div id="message" style="display: none;">
</div>
<div id="waiting" style="display: none;">
Please wait<br />
<img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form action="" id="searchForm">
<label for="search">Matter Search:</label> <input type="text" name="search" id="search" />
<input type="submit" id="submit" value="Submit" />
<a href="#">Link</a>
</form>
<div id="matterTableDiv" style="display: none;">
List of Matters
<table id="matterTable" border="1">
<thead>
<th>Matter Names</th>
<th>Matter Number</th>
<th>Description</th>
<th></th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="matterDetailTableDiv" style="display: none;">
Matter Detail Table
</div>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').focus();
$('#submit').click(function(){
$('#message').hide(200);
$("#matterTableDiv").hide(200);
$("#matterTable tbody").text("");
$('#waiting').show(200);
$('#searchForm').hide(200);
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
data: {
search : $('#search').val()
},
success : function(data){
if(data.msg == "[]" ){
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
$('#waiting').hide(200);
$('#matterTableDiv').removeClass().addClass((data.error === true) ? 'error' : 'success')
if(data.error == false){
var str = JSON.parse(data.msg);
$("#matterTableDiv").show(200);
//alert("List :" str.length);
//alert("List :" str.toString());
$("#matterTable").html();
$.each(str, function(key, value) {
var tblRow =
"<tr>"
// "<td><a id=" key " href='#dbID=" value.dbID "amp;matID=" value.matterID ">" value.matterInfoSortName "</a></td>"
"<td>" value.matterInfoSortName "</td>"
"<td>" value.matterInfoMatterNum "</td>"
"<td>" value.matterInfoFileDesc "</td>"
"<td><input type='button' value=" value.matterInfoFileDesc "></td>"
"</tr>";
$(tblRow).appendTo("#matterTable tbody");
//alert(key ': ' value.matterInfoSortName);
});
$("button").live("click",function(){
var row = $(this).closest("tr");
var rowIndex = row.index();
alert(rowIndex);
});
}else{
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
}
$('#searchForm').show(200);
if (data.error === true)
$('#searchForm').hide(200);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#waiting').hide(200);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(200);
$('#searchForm').show(200);
}
});
return false;
});
});
</script>
</center>
</body>
Комментарии:
1. Можете ли вы опубликовать HTML-код? Есть несколько способов сделать это, и это облегчит ответ на ваш вопрос.
Ответ №1:
Я знаю, что вы запрашиваете индекс строки, есть пользователи, которые дали вам ответ. Но обычно нам нужен идентификатор строки, потому что идентификатор принадлежит идентификатору в базе данных. В этом случае вы могли бы использовать идентификатор ячейки или саму кнопку. Пример:
<table>
<tr id="Data1"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data2"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data3"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
<tr id="Data4"><td>a</td><td>b</td><td>c</td><td><input type="button" value="Data"/></td></tr>
</table>
$("input[type=button]").live("click", function() {
var row = $(this).closest("tr");
var rowId = row.attr("id");
alert(rowId);
});
У вас есть это здесь:
Комментарии:
1. Я обновил свой код, но будет работать, только если вы включите идентификатор в tr. Если нет, вы можете выбрать опцию «index()».
Ответ №2:
Вы можете перейти из this (нажатой кнопки) в обработчике и использовать .closest() для получения <tr> значения кнопки, а затем взять оттуда все, что захотите, например:
$(".someButton").live("click", function() {
var row = $(this).closest("tr");
var rowIndex = row.index();
});
Для получения полного списка функций «перемещения», подобных этой, ознакомьтесь с разделом обхода дерева API.
Комментарии:
1. Спасибо! Это прекрасно работает само по себе, но я не могу понять, как заставить это работать в самом проекте. Я все еще нахожусь на стадии обучения этому.
2. Что у меня есть, так это то, что я генерирую таблицу из ответа JSON, вызывая запрос REST. Чего я хочу прямо сейчас, так это того, чтобы при нажатии на одну из кнопок или ссылку, связанную со строками, я запускал другие запросы REST, чтобы получить более подробную информацию . Как бы мне это сделать?
Ответ №3:
Я предполагаю, что вы используете…
$('.all_links').click(some_function)
Итак, в этом случае вы можете просто найти ее изнутри some_function вот так:
function some_function() {
$(this).parents('tr'); // this will give you the link's row.
}
Комментарии:
1.Это привело бы к получению всех
<tr>предков, если бы это была, например, вложенная таблица.