วิธีรับค่าเซลล์ตารางโดยใช้ jQuery

213

ฉันพยายามหาวิธีรับค่าของตารางเซลล์สำหรับแต่ละแถวโดยใช้ 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 = 
}

jquery

— ฌอนเทย์เลอร์
แหล่งที่มา

4

นี่คือการกวดวิชาที่สมบูรณ์แบบด้วยการสาธิตสดเกี่ยวกับวิธีการที่จะได้รับตารางค่าในเซลล์ TD codepedia.info/jquery-get-table-cell-td-value-div

— Satinder singh

306

หากคุณสามารถทำได้อาจจะคุ้มค่าหากใช้แอตทริบิวต์ class ใน TD ที่มีรหัสลูกค้าเพื่อให้คุณสามารถเขียน:

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

เป็นหลักนี้เป็นเช่นเดียวกับโซลูชั่นอื่น ๆ (อาจเป็นเพราะฉันคัดลอกวาง) แต่มีข้อได้เปรียบที่คุณไม่จำเป็นต้องเปลี่ยนโครงสร้างของรหัสของคุณถ้าคุณย้ายไปรอบ ๆ คอลัมน์หรือแม้แต่ใส่รหัสลูกค้าลงใน<span>ให้คุณเก็บ class class ไว้ด้วย

อย่างไรก็ตามฉันคิดว่าคุณสามารถทำได้ด้วยตัวเลือกเดียว:

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

ถ้านั่นทำให้สิ่งต่าง ๆ ง่ายขึ้น

— เจนนิเฟอร์
แหล่งที่มา

4

ฉันจะบอกว่า $ ('# mytable td.customerIDCell') แต่ละอัน (function () {alert ($ (this) .html ());}); แต่ +1

— Matt Briggs

:-) ขอบคุณ - แต่ถ้าคุณต้องการที่จะใส่ลงในช่วง (ฉันอาจมีรูปแบบที่ไม่ดีในช่วงคำตอบของฉัน!)

— เจนนิเฟอร์

2

การใช้คลาสบน tr มีประโยชน์อย่างยิ่งหากคุณมี <td> ภายใน <tfoot> (หรือกำลังใช้ <td> แทน <th>) และไม่ต้องการสิ่งเหล่านั้น

— แฟรงค์ลุ

$ ('# mytable tr'). แต่ละอัน (function () {var customerId = $ (นี่) .find (". customerIDCell"). html ();});

— Osama khodrog

แต่ถ้าฉันต้องการได้รับ html tr แล้วสิ่งที่เราสามารถทำได้

— นักพัฒนา

132

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

สิ่งที่คุณกำลังทำคือวนซ้ำ trs ทั้งหมดในตารางค้นหา td แรกใน tr ปัจจุบันในลูปและแยก html ด้านใน

หากต้องการเลือกเซลล์ใดเซลล์หนึ่งคุณสามารถอ้างอิงเซลล์ด้วยดัชนี:

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

ในโค้ดด้านบนฉันจะดึงค่าของแถวที่สาม (ดัชนีเป็นศูนย์ตามดังนั้นดัชนีเซลล์แรกจะเป็น 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;
}

— Andreas Grech
แหล่งที่มา

1

ขอบคุณสิ่งนี้มีประโยชน์มากกว่าสำหรับฉันเนื่องจากฉันไม่สามารถควบคุมมาร์กอัพของเอกสารที่ฉันต้องการแยกวิเคราะห์โดยใช้ jQuery ดังนั้นความสามารถในการใช้ "td: first", "td: last" ฯลฯ เป็นความช่วยเหลือที่ดีมาก

— atomicules

1

eq (2) จะได้รับค่าของคอลัมน์ที่สามไม่ใช่แถวที่สาม

— รักสด

eq (2) ในรหัสของคุณคืออะไร? ฉันหมายถึง 2 คือดัชนีที่ td หรือ tr?

— TechnicalKalsa

@Singh องค์ประกอบที่ดัชนี 2 ของtdคอลเลกชันที่ส่งกลับโดยfind("td")ฟังก์ชั่น

— Andreas Grech

ฉันชอบตัวเลือก 2 ที่มีดัชนีเป็นตัวอ้างอิงซอของฉันที่นี่

— HattrickNZ

18

วิธีที่ไม่พิถีพิถัน:

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

สิ่งนี้สามารถเปลี่ยนให้ทำงานกับเซลล์ที่ไม่ใช่เซลล์แรกได้อย่างชัดเจน

— ชะแลงขนาดสั้น
แหล่งที่มา

8

$('#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();
  }
});

— Strelok
แหล่งที่มา

2

ไม่จำเป็นต้องข้ามแถวแรกเนื่องจากมี <th> ไม่ใช่ <td> ดังนั้นข้อมูลของพวกเขาจะไม่ถูกดึงออกมา

— Andreas Grech

7

ลองนี้

$(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.
    });
});

— Nikhil Dinesh
แหล่งที่มา

1

ขององค์ประกอบที่สองไม่ใช่องค์ประกอบแรกเริ่มต้นที่ 0

— Claudiu Creanga

4

คุณไม่ได้ใช้รหัสสำหรับคอลัมน์นั้นใช่ไหม บอกว่า:

    <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>

— MOH3n MOH
แหล่งที่มา

4

วิธีนี้ใช้ได้ผล

$(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!";
        }
    }
});

— เดวิด
แหล่งที่มา

2

ลองนี้:

<!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>

— โมฮัมมัด
แหล่งที่มา

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

— Jithin
แหล่งที่มา

2

ตัวอย่างการทำงาน: 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");
});
});

— Gazmend Hoxha
แหล่งที่มา