반응형
단추를 클릭하여 표 행의 내용 가져오기
내 표에 있는 각 열의 세부 정보를 추출해야 합니다.예를 들어, "이름/Nr" 열을 입력합니다.
- 테이블에 여러 개의 주소가 있습니다.
- 각 행의 맨 마지막 열에는 사용자가 나열된 주소를 선택할 수 있는 단추가 있습니다.
문제:내 코드는 첫 번째 코드만 선택합니다.<td> 것. 입니다.nr이걸 어떻게 작동시키죠?
jQuery 비트는 다음과 같습니다.
$(".use-address").click(function() {
var id = $("#choose-address-table").find(".nr:first").text();
$("#resultas").append(id); // Testing: append the contents of the td to a div
});
표:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Leeds</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
<tr>
<td class="nr">49</td>
<td>Some Street 2</td>
<td>Lancaster</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
</tbody>
</table>
연습의 목적은 정보가 들어 있는 행을 찾는 것입니다.우리가 그곳에 도착하면, 우리는 필요한 정보를 쉽게 추출할 수 있습니다.
정답.
$(".use-address").click(function() {
var $item = $(this).closest("tr") // Finds the closest row <tr>
.find(".nr") // Gets a descendent with class="nr"
.text(); // Retrieves the text within <td>
$("#resultas").append($item); // Outputs the answer
});
이제 그런 상황에서 자주 묻는 몇 가지 질문에 집중해 보겠습니다.
가장 가까운 행을 찾는 방법은 무엇입니까?
용사를 합니다..closest():
var $row = $(this).closest("tr");
용사를 합니다..parent():
방법을 사용하여 DOM 트리를 위로 이동할 수도 있습니다.이것은 때때로 함께 사용되는 대안일 뿐입니다..prev()그리고..next().
var $row = $(this).parent() // Moves up from <button> to <td>
.parent(); // Moves up from <td> to <tr>
셀 든모블셀가기<td>
그래서 우리는 우리의.$row테이블 셀 텍스트를 출력합니다.
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td"); // Finds all children <td> elements
$.each($tds, function() { // Visits every single <td> element
console.log($(this).text()); // Prints out the text within the <td>
});
특정 항목 가져오기<td>
것과 할 수 .<td>요소
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element
$.each($tds, function() { // Visits every single <td> element
console.log($(this).text()); // Prints out the text within the <td>
});
유용한 방법
.closest()선택기와 일치하는 첫 번째 요소 가져오기.parent()현재 일치하는 요소 집합에 있는 각 요소의 상위 항목.parents()현재 일치하는 요소 집합에서 각 요소의 상위 항목 가져오기.children()일치하는 요소 집합에서 각 요소의 자식을 가져옵니다..siblings()일치하는 요소 집합에서 각 요소의 형제를 가져옵니다..find()현재 일치하는 요소 집합에서 각 요소의 하위 항목을 가져옵니다..next()일치하는 요소 집합에서 각 요소의 바로 다음 형제를 가져옵니다..prev()일치하는 요소 집합에서 각 요소의 바로 앞에 있는 형제를 가져옵니다.
클릭한 버튼과 관련된 행을 찾으려면 코드를 변경해야 합니다.사용해 보십시오.
$(".use-address").click(function() {
var id = $(this).closest("tr").find(".nr").text();
$("#resultas").append(id);
});
사용해 보십시오.
$(".use-address").click(function() {
$(this).closest('tr').find('td').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
});
});
이것이 가장 가까운 위치를 찾습니다.tr의 (DOM을 통해 을한 후 (DOM 통해위이동로을다현니)를 합니다.td값을 사용하여 문자열/어레이를 생성할 수 있습니다.
function useAdress () {
var id = $("#choose-address-table").find(".nr:first").text();
alert (id);
$("#resultas").append(id); // Testing: append the contents of the td to a div
};
버튼을 클릭합니다.
onclick="useAdress()"
선택기".nr:first"구체적으로 첫 번째, 그리고 클래스를 가진 첫 번째 요소만 찾는 것입니다."nr"선택한 테이블 요소 내에 있습니다.만약 당신이 대신 전화를 한다면,.find(".nr")당신은 테이블 내의 모든 요소들이 클래스를 갖게 될 것입니다."nr"이러한 요소가 모두 갖춰지면 .각 방법을 사용하여 요소를 반복할 수 있습니다.예:
$(".use-address").click(function() {
$("#choose-address-table").find(".nr").each(function(i, nrElt) {
var id = nrElt.text();
$("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
});
});
하지만, 그것은 여러분 모두를 얻을 것입니다.td.nr클릭한 행의 요소뿐만 아니라 표의 요소도 표시됩니다.클릭한 버튼이 포함된 행으로 선택을 더 제한하려면 다음과 같이 .close 메서드를 사용합니다.
$(".use-address").click(function() {
$(this).closest("tr").find(".nr").each(function(i, nrElt) {
var id = nrElt.text();
$("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
});
});
jquery를 사용하여 행에서 ID가 있는 요소 찾기
$(document).ready(function () {
$("button").click(function() {
//find content of different elements inside a row.
var nameTxt = $(this).closest('tr').find('.name').text();
var emailTxt = $(this).closest('tr').find('.email').text();
//assign above variables text1,text2 values to other elements.
$("#name").val( nameTxt );
$("#email").val( emailTxt );
});
});
var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
$(this).find("td").each(function () {
values[count] = $(this).text();
count++;
});
});
이제 값 배열에 해당 행의 모든 셀 값이 포함됩니다. 클릭한 행의 첫 번째 셀 값 [0]과 같이 사용할 수 있습니다.
딜러의 간단한 예에 대한 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>click</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>click</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>click</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
var $row = $(this).closest("tr"), // Finds the closest row <tr>
$tds = $row.find("td:nth-child(2)");
$.each($tds, function() {
console.log($(this).text());
var x = $(this).text();
alert(x);
});
});
});
</script>
</div>
</body>
</html>
헤더 섹션에 다음 코드 배치
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
본문의 표를 다음과 같이 정의합니다.
<table class="table table-hover">
<tr>
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>View</th>
</tr>
<tr>
<td class="nr"><span>50</span></td>
<td>Some Street 1</td>
<td>Leeds</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td><button type="button" class="btn grabId" >View</button></td>
</tr>
</table>
그런 다음 이 스크립트를 사용합니다.
<script>
$(".grabId").click(function() {
var $row = $(this).closest("tr"); // Find the row
var $siteId = $row.find(".siteId").text(); // Find the text
alert($siteId);
});
</script>
이거 해봐, 그냥 javascript나 jquery를 선택해봐 헤더 열이 없다면, 1만큼도 빼지 마.
function rowClicked(element){
var rowJavascript = element.parentNode.parentNode;
var rowjQuery = $(element).closest("tr");
var rowIndexJavascript = rowJavascript.rowIndex-1;
var rowIndexjQuery = rowjQuery[0].rowIndex-1;
console.log("rowIndexJavascript : ",rowIndexJavascript);
console.log("rowIndexjQuery : ",rowIndexjQuery);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Row ID</th>
<th>Button</th>
</tr>
<tr>
<td>0</td><td><button type="button" onclick="rowClicked(this)">test1</button></td>
</tr>
<tr>
<td>1</td><td><button type="button" onclick="rowClicked(this)">test2</button></td>
</tr>
<tr>
<td>2</td><td><button type="button" onclick="rowClicked(this)">test3</button></td>
</tr>
</table>언급URL : https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click
반응형
'it-source' 카테고리의 다른 글
| PowerShell은 어떤 언어입니까? (0) | 2023.08.29 |
|---|---|
| 전용 생성자가 있는 Java Springbean (0) | 2023.08.29 |
| 도커 컨테이너로 호스트 포트 전달 (0) | 2023.08.29 |
| jQuery를 사용하여 형제 요소를 선택하려면 어떻게 해야 합니까? (0) | 2023.08.24 |
| jQuery 위치 href (0) | 2023.08.24 |