jQuery를 사용하여 테이블 셀 값을 가져오는 방법은 무엇입니까?
저는 jQuery를 사용하여 각 행의 테이블 셀 값을 구하는 방법을 찾고 있습니다.
내 테이블은 다음과 같습니다.
<table id="mytable">
<tr>
<th>Customer Id</th>
<th>Result</th>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
<tr>
<td>789</td>
<td></td>
</tr>
</table>
저는 기본적으로 테이블을 순환하고, 가치를 얻고 싶습니다.Customer Id각 행에 대한 열입니다.
아래 코드에서 각 행을 반복하기 위해 이 작업이 필요하다는 것을 알아냈지만, 행의 첫 번째 셀의 값을 얻는 방법을 잘 모르겠습니다.
$('#mytable tr').each(function() {
var cutomerId =
}
가능하다면 고객 ID가 포함된 TD의 클래스 속성을 사용하여 다음과 같은 내용을 작성할 수 있습니다.
$('#mytable tr').each(function() {
var customerId = $(this).find(".customerIDCell").html();
});
기본적으로 이것은 다른 솔루션과 동일하지만(아마도 내가 복사 붙여넣기를 했기 때문일 것이다), 열을 이동하거나 고객 ID를 입력할 경우 코드 구조를 변경할 필요가 없다는 장점이 있습니다.<span>클래스 속성을 유지할 수 있습니다.
그건 그렇고, 저는 당신이 그것을 하나의 선택기에서 할 수 있다고 생각합니다:
$('#mytable .customerIDCell').each(function() {
alert($(this).html());
});
그게 일을 더 쉽게 만든다면요.
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
당신이 하고 있는 것은 테이블의 모든 tr을 반복하고, 현재 tr 루프에서 첫 번째 td를 찾고, 내부 html을 추출하는 것입니다.
특정 셀을 선택하려면 인덱스를 사용하여 셀을 참조할 수 있습니다.
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
위 코드에서 세 번째 행의 값을 검색합니다(인덱스는 0 기반이므로 첫 번째 셀 인덱스는 0이 됩니다).
jQuery 없이도 다음과 같은 작업을 수행할 수 있습니다.
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
덜 우스꽝스러운 접근 방식:
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
이것은 분명히 최초가 아닌 세포와 함께 작동하도록 변경될 수 있습니다.
$('#mytable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
이거 해봐요.
$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
alert(data.target.innerHTML);//this will show the inner html
alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
});
});
작동합니다.
$(document).ready(function() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
$("#tbl").children().children()[row].children[col].innerHTML = "H!";
}
}
});
사용해 보십시오.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function getVal(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
alert(targ.innerHTML);
}
onload = function() {
var t = document.getElementById("main").getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
t[i].onclick = getVal;
}
</script>
<body>
<table id="main"><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr></table>
</body>
</html>
$(document).ready(function() {
var customerId
$("#mytable td").click(function() {
alert($(this).html());
});
});
작동 예: http://jsfiddle.net/0sgLbynd/
<table>
<tr>
<td>0</td>
<td class="ms-vb2">1</td>
<td class="ms-vb2">2</td>
<td class="ms-vb2">3</td>
<td class="ms-vb2">4</td>
<td class="ms-vb2">5</td>
<td class="ms-vb2">6</td>
</tr>
</table>
$(document).ready(function () {
//alert("sss");
$("td").each(function () {
//alert($(this).html());
$(this).html("aaaaaaa");
});
});
언급URL : https://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery
'programing' 카테고리의 다른 글
| Visual Studio Code + Spring Boot Project 변경 spring.properties.추가 위치 등 (0) | 2023.08.07 |
|---|---|
| C++에서 문자열 스트림에서 문자열로 변환하려면 어떻게 해야 합니까? (0) | 2023.08.02 |
| 매개 변수를 button.addSwift에서 Target 액션에 추가합니다. (0) | 2023.08.02 |
| Spring Boot 웹 소켓(StoppSession)이 있는 Django 채널이 작동하지 않음 (0) | 2023.08.02 |
| 문자열을 이진으로 변환한 다음 PHP를 사용하여 다시 변환 (0) | 2023.08.02 |