एक बटन क्लिक के साथ एक तालिका पंक्ति की सामग्री प्राप्त करें

Question 1

मुझे अपनी तालिका में प्रत्येक कॉलम का विवरण निकालने की आवश्यकता है। उदाहरण के लिए, कॉलम "नाम / एनआर"।

तालिका में कई पते हैं
प्रत्येक पंक्ति के बहुत अंतिम कॉलम में एक बटन होता है जो उपयोगकर्ता को एक सूचीबद्ध पता चुनने देता है।

समस्या: मेरा कोड केवल पहले वाले <td>वर्ग को चुनता है nr। मैं इससे कैसे काम लूं?

यहाँ jQuery बिट है:

$(".use-address").click(function() {
    var id = $("#choose-address-table").find(".nr:first").text();
    $("#resultas").append(id); // Testing: append the contents of the td to a div
});

तालिका:

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>Leeds</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>Lancaster</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
    </tbody>
</table>

Question 2

अभ्यास का उद्देश्य उस पंक्ति को खोजना है जिसमें जानकारी शामिल है। जब हम वहां पहुंचते हैं, तो हम आवश्यक जानकारी आसानी से निकाल सकते हैं।

उत्तर

$(".use-address").click(function() {
    var $item = $(this).closest("tr")   // Finds the closest row <tr> 
                       .find(".nr")     // Gets a descendent with class="nr"
                       .text();         // Retrieves the text within <td>

    $("#resultas").append($item);       // Outputs the answer
});

डेमो देखें

अब आइए ऐसी स्थितियों में कुछ अक्सर पूछे जाने वाले प्रश्नों पर ध्यान केंद्रित करें।

निकटतम पंक्ति कैसे खोजें?

का उपयोग कर .closest():

var $row = $(this).closest("tr");

का उपयोग कर .parent():

तुम भी .parent()विधि का उपयोग कर डोम पेड़ को स्थानांतरित कर सकते हैं । यह सिर्फ एक विकल्प है जिसे कभी-कभी .prev()और साथ में प्रयोग किया जाता है .next()।

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

सभी तालिका सेल `<td>`मान प्राप्त करना

तो हमारे पास है $rowऔर हम टेबल सेल टेक्स्ट को आउटपुट करना चाहेंगे:

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

डेमो देखें

एक विशिष्ट `<td>`मूल्य प्राप्त करना

पिछले एक के समान, हालांकि हम बाल <td>तत्व के सूचकांक को निर्दिष्ट कर सकते हैं ।

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

डेमो देखें

उपयोगी तरीके

.closest() - पहला तत्व प्राप्त करें जो चयनकर्ता से मेल खाता है
.parent() - मिलान तत्वों के वर्तमान सेट में प्रत्येक तत्व के माता-पिता को प्राप्त करें
.parents() - मिलान तत्वों के वर्तमान सेट में प्रत्येक तत्व के पूर्वजों को प्राप्त करें
.children() - मिलान तत्वों के सेट में प्रत्येक तत्व के बच्चों को प्राप्त करें
.siblings() - मिलान तत्वों के सेट में प्रत्येक तत्व के भाई-बहन प्राप्त करें
.find() - मिलान तत्वों के वर्तमान सेट में प्रत्येक तत्व के वंशज मिलते हैं
.next() - मिलान तत्वों के सेट में प्रत्येक तत्व के तुरंत बाद प्राप्त करें
.prev() - मिलान तत्वों के सेट में प्रत्येक तत्व के तुरंत पूर्ववर्ती सिबलिंग प्राप्त करें

Question 3

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

$(".use-address").click(function() {
   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); // this will be the text of each <td>
   });
});

यह trवर्तमान में क्लिक किए गए बटन के सबसे करीब (DOM के माध्यम से जा रहा है) मिलेगा और फिर प्रत्येक को लूप करेगा td- आप मानों के साथ एक स्ट्रिंग / सरणी बनाना चाहते हैं।

यहाँ उदाहरण है

यहाँ एक सरणी उदाहरण का उपयोग करके पूरा पता प्राप्त करना

Question 4

जिस बटन को क्लिक किया गया था, उसके सापेक्ष आपको अपना कोड बदलने की आवश्यकता है। इसे इस्तेमाल करे:

$(".use-address").click(function() {
    var id = $(this).closest("tr").find(".nr").text();
    $("#resultas").append(id);
});

उदाहरण का बेड़ा

Question 5

function useAdress () { 
var id = $("#choose-address-table").find(".nr:first").text();
alert (id);
$("#resultas").append(id); // Testing: append the contents of the td to a div
};

फिर अपने बटन पर:

onclick="useAdress()"

Question 6

चयनकर्ता ".nr:first"विशेष रूप से पहले के लिए देख रहा है, और केवल पहला, तत्व जिसमें "nr"चयनित तालिका तत्व के भीतर वर्ग है। यदि आप इसके बजाय कॉल .find(".nr")करते हैं तो आपको टेबल वाले क्लास के सभी तत्व मिल जाएंगे "nr"। एक बार जब आपके पास उन सभी तत्व होते हैं, तो आप उन पर पुनरावृति करने के लिए .each विधि का उपयोग कर सकते हैं। उदाहरण के लिए:

$(".use-address").click(function() {
    $("#choose-address-table").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});

हालांकि, कि तुम मिलेगा सब के td.nrतत्वों तालिका में न सिर्फ पंक्ति क्लिक किए गए में से एक है,। अपने चयन को क्लिक की गई बटन वाली पंक्ति तक सीमित करने के लिए, .closest विधि का उपयोग करें , जैसे:

$(".use-address").click(function() {
    $(this).closest("tr").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});

Question 7

Jquery का उपयोग करके पंक्ति में आईडी के साथ तत्व का पता लगाएं

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

Question 8

var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

अब मान सरणी में उस पंक्ति के सभी सेल मान होते हैं जिनका उपयोग मूल्यों की तरह किया जा सकता है [0] क्लिक की गई पंक्ति का पहला सेल मान

Question 9

यहाँ प्रतिनिधि के सरल उदाहरण के लिए पूरा कोड है

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>click</td>
      </tr>

    </tbody>
  </table>
  <script>
  $(document).ready(function(){
  $("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
  var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)");
     $.each($tds, function() {
        console.log($(this).text());
        var x = $(this).text();
        alert(x);
    });
    });
});
  </script>
</div>

</body>
</html>

एक बटन क्लिक के साथ एक तालिका पंक्ति की सामग्री प्राप्त करें

उत्तर

निकटतम पंक्ति कैसे खोजें?

सभी तालिका सेल <td>मान प्राप्त करना

एक विशिष्ट <td>मूल्य प्राप्त करना

उपयोगी तरीके

सभी तालिका सेल `<td>`मान प्राप्त करना

एक विशिष्ट `<td>`मूल्य प्राप्त करना