반응형
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.
});
});
해당 열에 id를 사용하지 않습니까? 그렇게 말해봐:
<table width="300" border="1">
<tr>
<td>first</td>
</tr>
<tr>
<td>second</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td id="result">Where the result should occur</td>
</tr>
</table>
<script type="text/javascript">
$('#result').html("The result is....");
</script>
이 작동합니다
$(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' 카테고리의 다른 글
| 스칼라에서 목록의 끝에 요소 추가 (0) | 2020.05.06 |
|---|---|
| 파이프와 함께 서브 프로세스 명령을 사용하는 방법 (0) | 2020.05.06 |
| 도커 컨테이너에서 호스트 포트에 액세스하는 방법 (0) | 2020.05.06 |
| 동적 프로그래밍을 사용하여 가장 긴 하위 시퀀스를 결정하는 방법은 무엇입니까? (0) | 2020.05.06 |
| sh에서 'find'의 '-prune'옵션을 사용하는 방법은 무엇입니까? (0) | 2020.05.06 |