কীভাবে 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 = 
}

4
টেবিলে সেল টিডি মান কোডেপিডিয়া.info
সিংহ

উত্তর:


306

আপনি যদি এটি করতে পারেন তবে গ্রাহক আইডি থাকা টিডিতে এটি একটি শ্রেণীর বৈশিষ্ট্যটি ব্যবহার করার পক্ষে উপযুক্ত যাতে আপনি লিখতে পারেন:

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

মূলত এটি অন্যান্য সমাধানগুলির সমান (সম্ভবত আমি কপি-পেস্ট করেছি), তবে এর সুবিধা রয়েছে যে আপনি যদি কলামগুলির চারপাশে ঘুরে বেড়ান, বা এমনকি গ্রাহক আইডিকে একটিতে রাখে তবে আপনার কোডের কাঠামোটি পরিবর্তন করতে হবে না advantage <span>আপনি যদি শ্রেণীর বৈশিষ্ট্যটি এর সাথে রাখেন তবে শর্ত থাকে।

যাইহোক, আমি মনে করি আপনি এটি একটি নির্বাচক মধ্যে করতে পারেন:

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

যদি এটি জিনিস সহজ করে তোলে।


4
আমি বলব $ ('# mytable td.customerIDCell')। প্রতিটি (ফাংশন () {সতর্কতা ($ (এটি) .html ());}); তবে +1
ম্যাট ব্রিগেস 21

:-) ধন্যবাদ - তবে আপনি যদি এটি একটি স্প্যানের মধ্যে রাখতে চান তবে (আমার উত্তরটিতে স্প্যানটি খারাপভাবে ফর্ম্যাট করা হতে পারে!)
জেনিফার

2
টিআর উপর ক্লাস ব্যবহার বিশেষত সহায়ক যদি আপনি <tfoot> এর মধ্যে <td> হয়ে থাকেন (বা <th> পরিবর্তে <td> ব্যবহার করছেন) এবং সেগুলি না চান।
ফ্রাঙ্ক লুক

$ ('# mytable tr')। প্রতিটি (ফাংশন () {var গ্রাহকআইডি = $ (এটি) .ফাইন্ড ("। গ্রাহকআইডিএসেল") h
ওসামা খোডরোগ

তবে আমি যদি টিআর এইচটিএমএল পেতে চাই তবে আমরা কী করতে পারি
বিকাশকারী

132
$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").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 ব্যবহার করে পার্স করতে চাই তার মার্কআপের উপর আমার নিয়ন্ত্রণ নেই। সুতরাং "টিডি: প্রথম", "টিডি: শেষ" ইত্যাদি ব্যবহারে সক্ষম হওয়া একটি দুর্দান্ত সহায়তা ছিল।
পরমাণু

1
eq (2) তৃতীয় সারির নয়, তৃতীয় কলামের মান পাবে।
লাইভ-

আপনার কোডে এক (2) কি? আমার অর্থ 2 টি কোন টিডি বা টিআর এর সূচক?
টেকনিক্যালকালসা

@ সিংহ tdসংগ্রহের সূচী 2 এর উপাদানটি find("td")ফাংশন দিয়ে ফিরে এসেছিল ।
অ্যান্ড্রেস গ্রেচ

রেফ হিসাবে সূচকটি সহ আমি বিকল্প 2 পছন্দ করি, আমার ফ্রিডল এখানে
হ্যাট্রিকএনজেড

18

একটি কম jquerish পদ্ধতির:

$('#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
প্রথম সারিতে এড়ানোর কোনও দরকার নেই, কারণ এটিতে <ম> রয়েছে <ডিটিডি> নয়, সুতরাং তাদের ডেটা তোলা যাবে না
আন্দ্রেয়াস গ্রেচ

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
দ্বিতীয় উপাদানটির, প্রথমটি নয়, eq 0 থেকে শুরু হয়
ক্লাদিউ ক্রেঙ্গা

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>

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

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");
});
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.