假設我有一個HTML表，並且每行都有一些數據，更新和刪除按鈕。我想通過點擊更新按鈕來檢索這個具體行所具有的每一個數據。我已經搜索了其他的例子，但他們中的大多數只是通過使用列標識遍歷一列，並打印他們發現的每個單元格數據。在按下更新按鈕時，我需要檢索此行所有當前單元格數據。我怎樣才能做到這一點？HTML - 通過按下同一行內的按鈕獲取行ID
JS小提琴HERE
Could not properly indent code after trying for more than 30mins so I gave up
您可以從改變你的HTML按鈕：
<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>
到：
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
^^^^
添加這關鍵字到函數傳遞當前按鈕。現在，爲了得到相應的排它足夠你使用jQuery.closet（）：
var row = $(ele).closest('tr');
對於更新按鈕，您可以添加單擊處理程序：
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
的片段：
window.getConfirmation = function(ele){
var retVal = confirm("Are you sure you want to delete ?");
if(retVal == true){
alert("User wants to delete!");
var row = $(ele).closest('tr');
row.remove();
return true;
}
else{
alert ("User does not want to delete!");
return false;
}
}
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Employees</h2>
<table id="employees-table" class="table table-hover table-responsive">
<thead>
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Born</th>
<th>Country</th>
<th>Department</th>
<th class="text-center">Update Row</th>
<th class="text-center">Delete Row</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John</td>
<td>[email protected]</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Twain</td>
<td>[email protected]</td>
<td>1965</td>
<td>England</td>
<td>London</td>
<td class="text-center">
<button type="button" class="btn btn-warning">Update</button>
</td>
<td class="text-center">
<g:link controller="employee" action="deleteRecord">
<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
</g:link>
</td>
</tr>
</tbody>
</table>
</div>要檢索DAT按下按鈕後一排更新
<button type="button" class="btn btn-warning" onclick="getData(this)">
window.getData = function(val) {
let arr= [];
val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
if (item.getAttribute('class') != "text-center") {
arr.push(item.innerHTML)
}
},this)
console.log(arr); //["1", "John", "John", "[email protected]", "1976", "USA", "Michigan"]
}
@gaetanoM的答案將是公認的答案。如果有人想辦法，不僅只得到了ID，但全行數據，你可以試試這個：
HTML代碼：
更改此：
<td>1</td>
<td>John</td>
<td>John</td>
<td>[email protected]</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>
到此：
<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">[email protected]</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>
JavaScript代碼：
更改此：
$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
var row = $(this).closest('tr');
console.log('TR first cell: ' + row.find('td:first').text());
})
這樣：
見THIS小提琴的結果。
再次感謝所有參與尋找答案的人！
爲此行添加一個ID，點擊更新按鈕時，調用一個函數，該函數通過ID獲取行並記錄行數據 – OneMoreQuestion
但如果您有像25行那樣的操作，您會做什麼？如果你從mysql數據庫獲取數據會怎麼樣？它不會工作，然後 –
索引每一行。添加索引作爲id的一部分，如'id =「row」+ index'，然後獲取該特定行的數據 – OneMoreQuestion