একটি বোতাম ক্লিকের সাহায্যে একটি টেবিল সারির সামগ্রীগুলি পান

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

অনুশীলনের উদ্দেশ্যটি হ'ল সারিটি তথ্য রয়েছে contains সেখানে পৌঁছে আমরা প্রয়োজনীয় তথ্য সহজেই বের করতে পারি।

উত্তর

$(".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বর্তমানে ক্লিক করা বোতামটির নিকটতম (ডিওএম দিয়ে যাওয়া) এবং তারপরে প্রতিটি লুপটি সন্ধান করবে 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উপাদান টেবিলে না শুধু সারি যে ক্লিক করা হয়েছিল এক। ক্লিক করা বোতাম থাকা সারিটিতে আপনার নির্বাচনকে আরও সীমাবদ্ধ করতে, ক্লকসেট পদ্ধতিটি ব্যবহার করুন , যেমন:

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

এখন মান অ্যারেতে সেই সারির সমস্ত কক্ষের মান থাকে যা ক্লিক করা সারিটির প্রথম ঘর মান হিসাবে ব্যবহার করতে পারে

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>`মান প্রাপ্তি