代码之家 › 专栏 › 技术社区 › user3386779

获取表中一列的所有值

jquery javascript

user3386779 · 技术社区 · 5 年前

我有一张桌子和一块地 id,name,geo,age 我想收集 name,id and age ME .

   name=   ["a","b","c"]
   id= ["1","2","3"]
   age =["30","20","42"]

$(document).ready(function(){
 /*$(#geo tbody).find('tr').each(function( index ){
   console.log($(this).find(td:1));
  }); */
  name= new Array();
  $('#geo tbody').find('tr').each(function( ) {
 // console.log($( this).find(':nth-child(3)').text());
  if ($( this).find(':nth-child(3)').text()=='ME'){
  val= $( this).find(':nth-child(2)').text() ;
   name=$( this).find(':nth-child(2)').text() ;
   }
   //console.log(name);
});
console.log(name);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
 <thead>
   <tr>
   <th>id</th>
   <th>name</th>
   <th>geo</th>
   <th>age</th>
   </tr>
 </thead>
 <tbody>
   <tr>
   <td>1</td>
   <td>a</td>
   <td>ME</td>
   <td>20</td>
   </tr>
   <tr>
   <td>2</td>
   <td>b</td>
   <td>ME</td>
   <td>30</td>
   </tr>
   <tr>
   <td>3</td>
   <td>c</td>
   <td>ME</td>
   <td>42</td>
   </tr>
   <tr>
   <td>4</td>
   <td>d</td>
   <td>USA</td>
   <td>20</td>
   </tr>
   <tr>
   <td>5</td>
   <td>e</td>
   <td>UK</td>
   <td>22</td>
   </tr>
 </tbody>
 <tfoot>
 </tfoot>
</table>

1 回复 | 直到 5 年前

Swati lk_ayyagari 5 年前

.push 将值推入数组中。

演示代码 :

$(document).ready(function() {
  var age =[];
  var name = [];
  var id = [];
  $('#geo tbody').find('tr').each(function() {
    if ($(this).find(':nth-child(3)').text() == 'ME') {
      id.push($(this).find(':nth-child(1)').text());//push same
      name.push($(this).find(':nth-child(2)').text());
      age.push($(this).find(':nth-child(4)').text())
    }
  
  });
  console.log(name);
  console.log(id);
   console.log(age);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>geo</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>ME</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>ME</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>ME</td>
      <td>42</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>USA</td>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>e</td>
      <td>UK</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

double-beep hudson solomon 5 年前

首先,您需要添加 var 在里面 name = new Array(); :

var name = new Array();

接下来,您需要使用 .push()

name.push($(this).find(':nth-child(2)').text());

double-beep hudson solomon 5 年前

const id = [];
const name = [];
const age = [];

// get the tr in the tbody
document.querySelectorAll('#geo tbody tr').forEach(tr => {
  id.push(tr.children[0].textContent);
  name.push(tr.children[1].textContent);
  age.push(tr.children[3].textContent);
});

console.log(id, name, age);

<table id="geo">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>geo</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>ME</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>ME</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
      <td>ME</td>
      <td>42</td>
    </tr>
    <tr>
      <td>4</td>
      <td>d</td>
      <td>USA</td>
      <td>20</td>
    </tr>
    <tr>
      <td>5</td>
      <td>e</td>
      <td>UK</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>