Як отримати значення комірки таблиці за допомогою 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

Якщо можете, можливо, варто використовувати атрибут класу на TD, що містить ідентифікатор клієнта, щоб ви могли написати:

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

По суті, це те саме, що й інші рішення (можливо, тому, що я копіюю вставку), але має ту перевагу, що вам не потрібно буде змінювати структуру вашого коду, якщо ви рухаєтесь колонами або навіть ставите ідентифікатор клієнта в <span>, за умови збереження атрибута класу.

До речі, я думаю, ви могли це зробити в одному селекторі:

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

Якщо це полегшує справи.

— Дженніфер
джерело

4

Я б сказав $ ('# mytable td.customerIDCell'). Every (function () {alar ($ (this) .html ());}); але +1

— Метт Бріггс

:-) спасибі - але що робити, якщо ви хочете перевести це в проміжок (я, можливо, погано відформатував проміжок у своїй відповіді!)

— Дженніфер

2

Використання класу на tr особливо корисно, якщо у вас є <td> в межах <tfoot> (або ви використовуєте <td> замість <th>) і не хочете їх.

— Френк Люк

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

— Осама ходрог

але якщо я хочу отримати тр html також тоді, що ми можемо зробити

— Developer

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

Сігналы абмеркавання

— Андреас Грех
джерело

1

Дякую, мені це було корисніше, оскільки я не маю контролю над розміткою документа, який я хочу розібрати за допомогою jQuery. Тож можливість використовувати "td: first", "td: last" тощо, була чудовою підмогою.

— atomicules

1

eq (2) отримає значення третього стовпця, а не третього рядка.

— live-love

Що таке eq (2) у вашому коді? Я маю на увазі 2 - індекс якого td або tr?

— TechnicalKalsa

@Singh Елемент в індексі 2 tdколекції, повернутий find("td")функцією.

— Андреас Греч

Мені подобається варіант 2 з індексом як ref, моя скрипка тут

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

— Стрелок
джерело

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

— Нікхіл Дінеш
джерело

1

другого елемента, не першого, еквівалент починається з 0

— Клавді Креанга

4

Y ви не використовуєте 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>

— 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");
});
});

— Газменд Ходжа
джерело