JQuery का उपयोग करके टेबल सेल मान कैसे प्राप्त करें?

Question

मैं यह जानने की कोशिश कर रहा हूं कि 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 = 
}

Comments

यहाँ कैसे प्राप्त करने के लिए तालिका सेल टीडी मूल्य पर लाइव डेमो के साथ पूरा ट्यूटोरियल है codepedia.info/jquery-get-table-cell-td-value-div

— सिंह सतिंदर

Answer 1

यदि आप कर सकते हैं, तो टीडी पर ग्राहक आईडी वाले वर्ग विशेषता का उपयोग करने लायक हो सकता है ताकि आप लिख सकें:

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

अनिवार्य रूप से यह अन्य समाधानों के समान है (संभवतः क्योंकि मैं कॉपी-पेस्ट करता हूं), लेकिन इसका फायदा यह है कि आपको अपने कोड की संरचना को बदलने की आवश्यकता नहीं होगी यदि आप कॉलम के चारों ओर चलते हैं, या ग्राहक आईडी को एक में डालते हैं <span>, बशर्ते आप उसके साथ क्लास की विशेषता रखें।

वैसे, मुझे लगता है कि आप इसे एक चयनकर्ता में कर सकते हैं:

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

अगर इससे चीजें आसान हो जाती हैं।

Comments

मैं $ ('# mytable td.customerIDCell') कहूँगा। प्रत्येक (फंक्शन) (अलर्ट) ($ (यह) .html ());}); लेकिन +1

— मैट ब्रिग्स

:-) धन्यवाद - लेकिन क्या होगा अगर आप इसे एक स्पैन में डालना चाहते हैं (मैंने अपने उत्तर में स्पैन को बुरी तरह से स्वरूपित किया हो सकता है!)

— जेनिफर

यदि आप <tdoot> के भीतर <td> (या <th> के बजाय <td> का उपयोग कर रहे हैं) का उपयोग कर रहे हैं और नहीं चाहते हैं, तो tr पर वर्ग का उपयोग करना विशेष रूप से सहायक होता है।

— फ्रैंक ल्यूक

$ ('# mytable tr')। प्रत्येक (फंक्शन () {var customerId = $ (यह) .find ("। customerIDCell")। html ();});

— ओसामा खोडोग

लेकिन अगर मैं tr html भी प्राप्त करना चाहता हूं तो हम क्या कर सकते हैं

— डेवलपर

Answer 2

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

आप जो कर रहे हैं वह तालिका में सभी trs के माध्यम से पुनरावृत्ति कर रहा है, लूप में वर्तमान tr में पहला td ढूंढ रहा है और इसके आंतरिक 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;
}

​

Comments

धन्यवाद, यह मेरे लिए अधिक उपयोगी था क्योंकि मुझे उस दस्तावेज़ के मार्कअप पर नियंत्रण नहीं है जिसे मैं jQuery का उपयोग करके पार्स करना चाहता हूं। इसलिए "td: first", "td: last", आदि का उपयोग करने में सक्षम होना एक बड़ी मदद थी।

— एटॉमिक्यूलस

eq (2) को तीसरे कॉलम का मान मिलेगा, न कि तीसरी पंक्ति को।

— लाइव-लव

आपके कोड में eq (2) क्या है? मेरा मतलब 2 किस td या tr का इंडेक्स है?

— टेक्निकलकलस

@Singh tdसंग्रह के सूचकांक 2 पर तत्व find("td")फ़ंक्शन द्वारा वापस आ गया ।

— एंड्रियास ग्रेच

मैं विकल्प 2 को अनुक्रमणिका के रूप में पसंद करता हूं, मेरी फिडेल यहां

— HattrickNZ

Answer 3

एक कम-जेकर्श दृष्टिकोण:

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

यह स्पष्ट रूप से पहली कोशिकाओं के साथ काम करने के लिए बदला जा सकता है।

Answer 4

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

Comments

पहली पंक्ति को छोड़ने की कोई आवश्यकता नहीं है, क्योंकि इसमें <th>, <td> शामिल नहीं है, इसलिए उनका डेटा नहीं निकाला जाएगा

— एंड्रियास ग्रीच

Answer 5

इसे इस्तेमाल करे,

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

Comments

दूसरा तत्व, पहले वाला नहीं, eq 0 से शुरू होता है

— क्लाउडिया क्रेन्गा

Answer 6

Y क्या आप उस कॉलम के लिए आईडी का उपयोग नहीं करते हैं? कहते हैं कि:

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

Answer 7

यह काम

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

Answer 8

इसे इस्तेमाल करे :

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

Answer 9

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

Answer 10

एक काम का उदाहरण: 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");
});
});