JQuery yordamida Jadvalning barcha satr qiymatlarini qanday olish mumkin?

Men barcha satr yozuvlarini olishni xohlayman, hatto 2 yoki 3 ustunga ega.

Barcha qiymatlarni tbody dan olishni xohlayman.

Ushbu kodni sinab ko'rdim. Lekin bu ishlamayapti

Bu erda kod

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    alert($("#FieldNameID").text() + " " + $("#OperatorID").text());
  });
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSearch">Search</button>
<table class="table table-hover " id="queryTable">
  <thead>
    <tr>
      <th>Field Name</th>
      <th>Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="FieldNameID">tq.StoreID</td>
      <td class="OperatorID"> IN('1001')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND item.SubDescription1</td>
      <td class="OperatorID"> IN('215')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND dept.Name</td>
      <td class="OperatorID"> IN('Rent Department')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
    </tr>
  </tbody>
</table>
</div> </div>
0

9 javoblar

HTML-da btnSearch ni ko'rmayapman, biroq bosish ishlov berish operatoriga uni qo'shishga harakat qilasiz. Operatorni unga qo'shish vaqtida mavjud bo'lmasa, keyinroq HTML ga qo'shilsa ham, uni bosish operatorni o'chirmaydi.

Bundan tashqari, qatorlarni yinelediğinizde, sinflarni idlar bilan aralashtirib yuboradi. Buni siz shunday qilishingiz kerak:

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function() {
        var currentRow = $(this); //Do not search the whole HTML tree twice, use a subtree instead
        alert(currentRow.find(".FieldNameID").text() + " " + currentRow.fint("#OperatorID").text());
    });
    return false;
});
3
qo'shib qo'ydi

FieldNameID is a class for td DOM elements so you have to change your selector to $(".FieldNameID").

alert($(this).find('.FieldNameID').text(), $(this).find('.OperatorID').text());

Boshqa bir yechim esa, mos keladigan elementlar majmui ko'rsatilgan indeksdagi ko'rsatkichni kamaytiradigan .eq() usulini ishlatishdir.

$("table > tbody > tr").each(function() {
    alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text() );
});

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function() {
        alert($(this).find('td').eq(0).text() + " " + $(this).find('td').eq(1).text());
    });
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
   <thead>
       <tr>
           <th>Field Name</th>
           <th>Values</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td class="FieldNameID">tq.StoreID</td>
           <td class="OperatorID"> IN('1001')</td>
       </tr>
       <tr>
           <td class="FieldNameID">AND item.SubDescription1</td>
           <td class="OperatorID"> IN('215')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND dept.Name</td>
          <td class="OperatorID"> IN('Rent Department')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>    
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
       </tr>
    </tbody>
</table>
<button id="btnSearch">Click</button>
</div> </div>

Boshqa usul esa .children usulini qo'llashdir. Bu usul har bir elementning bolalarini mos keladigan elementlar to'plamiga kiritadi, ixtiyoriy ravishda selektor tomonidan filtrlanadi.

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function() {
        alert($(this).children('.FieldNameID').text() + " " + $(this).children('.OperatorID').text());
    });
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
   <thead>
       <tr>
           <th>Field Name</th>
           <th>Values</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td class="FieldNameID">tq.StoreID</td>
           <td class="OperatorID"> IN('1001')</td>
       </tr>
       <tr>
           <td class="FieldNameID">AND item.SubDescription1</td>
           <td class="OperatorID"> IN('215')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND dept.Name</td>
          <td class="OperatorID"> IN('Rent Department')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>    
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
       </tr>
    </tbody>
</table>
<button id="btnSearch">Click</button>
</div> </div>
3
qo'shib qo'ydi
Yaxshi javob uchun Felicitari. Agar btnSearch HTMLda bo'lmasa va askar allaqachon mavjud bo'lsa va bu savolni esdan chiqarmagan bo'lsa.
qo'shib qo'ydi muallif Lajos Arpad, manba
Bundan tashqari, sizning javobingizdagi taklif sizga o'zingiznikidan yaxshiroq ishlaydi, chunki siz butun HTML-da elementlarni kerakli kichik daraxt o'rniga emas: eq pseudo-selector bilan izlayapsiz.
qo'shib qo'ydi muallif Lajos Arpad, manba
Men bunga qo'shilaman va esdalik uchun rahmat.
qo'shib qo'ydi muallif Lajos Arpad, manba
Rahmatga @LajosArpad. Eng samarali usul .children usulini qo'llashdir. Btw, javobingiz uchun +1.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
Bu holda murakkablik metodingiz bilan bir xil bo'ladi.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba

batafsilroq ma'lumot olish uchun # o'rniga . dan foydalangan holda tanlagan sinflar uchun quyida parchani toping

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function() {
    var this = $(this);
        alert(this.find(".FieldNameID").text() + "  " + this.find(".OperatorID").text());
    });
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
   <thead>
       <tr>
           <th>Field Name</th>
           <th>Values</th>
       </tr>
   </thead>
   <tbody class="tbodyy">
       <tr>
           <td class="FieldNameID">tq.StoreID</td>
           <td class="OperatorID"> IN('1001')</td>
       </tr>
       <tr>
           <td class="FieldNameID">AND item.SubDescription1</td>
           <td class="OperatorID"> IN('215')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND dept.Name</td>
          <td class="OperatorID"> IN('Rent Department')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>    
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
       </tr>
    </tbody>
</table>

<input type="button" id="btnSearch" value="Search" />
</div> </div>
2
qo'shib qo'ydi
@mohamedhafil yoqimli javob, lekin bu $ (bu) ni saqlab qo'yish va $() ikki marta chaqirishdan saqlanish uchun foydalaning.
qo'shib qo'ydi muallif Lajos Arpad, manba
@Curiousdev xush kelibsiz.
qo'shib qo'ydi muallif Lajos Arpad, manba
Ohh bu ajoyib :)
qo'shib qo'ydi muallif Curiousdev, manba
@LajosArpad men umuman uni kengaytiryapman va yangi narsalarni bilib oldim :)
qo'shib qo'ydi muallif Curiousdev, manba
Rahmat, men sizning kodingizni ko'rganimdan oldin ham topdim.
qo'shib qo'ydi muallif mohamed hafil, manba

Sizning birinchi masala - siz id tanlash vositasidan foydalanmoqdasiz, ammo siz topmoqchi bo'lgan elementlar sinfga ega.

Ikkinchidan, $ (this) .find() dan foydalanib, joriy satrda kerakli xujayralarni topish uchun DOM traversaldan foydalanishingiz kerak.

Bundan tashqari, nosozlik paytida console.log ni alert() dan foydalanishni juda yaxshi deb hisoblang - ayniqsa, siz ko'rsatadigan katta hajmli ma'lumotlarga yoki pastadir. Buni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    console.log($(this).find('.FieldNameID').text(), $(this).find('.OperatorID').text());
  });
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
  <thead>
    <tr>
      <th>Field Name</th>
      <th>Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="FieldNameID">tq.StoreID</td>
      <td class="OperatorID"> IN('1001')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND item.SubDescription1</td>
      <td class="OperatorID"> IN('215')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND dept.Name</td>
      <td class="OperatorID"> IN('Rent Department')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
    </tr>
  </tbody>
</table>

<button id="btnSearch">Search</button>
</div> </div>
1
qo'shib qo'ydi

Bu sizga td qiymatlarini berishi mumkin

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function (index,element) {
       
        alert($(element).find(".FieldNameID").text() + " " + $(element).find(".OperatorID").text());
    });
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover " id="queryTable">
   <thead>
       <tr>
           <th>Field Name</th>
           <th>Values</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td class="FieldNameID">tq.StoreID</td>
           <td class="OperatorID"> IN('1001')</td>
       </tr>
       <tr>
           <td class="FieldNameID">AND item.SubDescription1</td>
           <td class="OperatorID"> IN('215')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND dept.Name</td>
          <td class="OperatorID"> IN('Rent Department')</td>
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>    
       </tr>
       <tr>
          <td class="FieldNameID">AND sup.SupplierName</td>
          <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
       </tr>
    </tbody>
</table>
<button id="btnSearch">Search</button>
</div> </div>
1
qo'shib qo'ydi

Agar sizni to'g'ri tushunsangiz, bu sizning muammoingizni hal qilishi mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$("#btnSearch").click(function() {
  $("table > tbody > tr").each(function() {
    var rowText=""
    $(this).find('td').each(function(){
     rowText= rowText +$(this).text() + " ";
    });
    alert(rowText);
  });
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSearch">Search</button>
<table class="table table-hover " id="queryTable">
  <thead>
    <tr>
      <th>Field Name</th>
      <th>Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="FieldNameID">tq.StoreID</td>
      <td class="OperatorID"> IN('1001')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND item.SubDescription1</td>
      <td class="OperatorID"> IN('215')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND dept.Name</td>
      <td class="OperatorID"> IN('Rent Department')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MOHAMMED ABDUL RAHMANمحمد عبد')</td>
    </tr>
    <tr>
      <td class="FieldNameID">AND sup.SupplierName</td>
      <td class="OperatorID"> IN('MACRONA FACTORYمحمد يسلم ناصر')</td>
    </tr>
  </tbody>
</table>
</div> </div>
1
qo'shib qo'ydi
$("#btnSearch").click(function() {
    $('#queryTable tbody tr').each(function() {
       alert($(this).find("td.FieldNameID").html() + " " + $(this).find("td.OperatorID").html());
    });
    return false;
}); 
1
qo'shib qo'ydi

HTML-kodda btnSearch ni ko'rmayapman. Shuningdek, ID tomonidan matnni ogohlantirishga harakat qilasiz, lekin elementlar faqat sinflarga ega.

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function() {
        alert($(".FieldNameID").text() + " " + $(".OperatorID").text());
    });
    return false; });
1
qo'shib qo'ydi
Bu sinflar bilan ko'plab narsalar mavjudligini unutmang. Quyidagidan foydalaning: eq pseudo-selector va siz mening upvote bo'ladi.
qo'shib qo'ydi muallif Lajos Arpad, manba

Uni ishlash uchun o'zgartirishingiz kerak bo'lgan yagona narsa ogohlantirish ichidagi koddir. Ko'rmoqchi bo'lgan sinfning html mazmunini topishingiz kerak

$("#btnSearch").click(function() {
    $("table > tbody > tr").each(function (index, value) {
        alert(
           $(value).find(".FieldNameID").html() + " " + $(value).find(".OperatorID").html()
        );
    });
    return false;
});
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb