Question

您好，专家们摘要如下：

$('.fa-edit').on('click', function() {
var skill_id = $(this).closest('td').prev('td').attr("id");
var email_id = $('#' + skill_id).closest('td').prev('td').attr("id");
var name_id = $('#' + email_id).closest('td').prev('td').attr("id");
var name  = $('#' + name_id).text();
var email  = $('#' + email_id).text();
var skill  = $('#' + skill_id).text();
alert(name);
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-condensed">
<thead>
      <tr>
          <th width="20%" align="left" valign="middle">Name</th>
          <th width="20%" align="left" valign="middle">Email </th>
          <th width="12%" align="left" valign="middle">Expertise</th>      
          <th width="6%" align="right" valign="middle">Action</th>
          <th width="6%" align="left" valign="middle">&nbsp;</th>
      </tr>
</thead>
<tbody>
   <tr> 
      <td align="left" valign="middle" id='dynamic_name_1'>
      Dynamic User1
      </td>
      <td align="left" valign="middle" id='dynamic_email_1'> 
      dynamic_user1@email.com 
      </td>
      <td align="left" valign="middle" id='dynamic_skill_1'>
      Skill1
      </td>
     <td align="right" valign="middle">
     <i class="fa fa-edit" id='90'></i>
     </td> 
  </tr>
</tbody>
</table>

我在下面的js中获取td值进行编辑。这是可行的，但是我想要一个简单的解决方案。

$('.fa-edit').on('click', function() {
var skill_id = $(this).closest('td').prev('td').attr("id");
var email_id = $('#' + skill_id).closest('td').prev('td').attr("id");
var name_id = $('#' + email_id).closest('td').prev('td').attr("id");
var name  = $('#' + name_id).text();
var email  = $('#' + email_id).text();
var skill  = $('#' + skill_id).text();
alert(name);
 });

请建议我一个非常简单的方法来实现这一目标。预先感谢。

Answer 1

尝试这个简单的解决方案

var name=$(this).parent().siblings(":nth-child(1)").text();
var email=$(this).parent().siblings(":nth-child(2)").text();
var skill=$(this).parent().siblings(":nth-child(3)").text();
    alert(name);

Answer 2

let values = [];

$('button').click(function()
{
    $('td').each(function()
    {
        values.push($(this).text())
    })
});

console.log(values);

我更喜欢使用对象/数组-这样，您只需将.text()推入数组即可。您可以进一步使用键进行操作，但是如果此数组是静态的，则只需要运行一次（或在代码中运行一次），数字索引就会更快。

Answer 3

您可以使用each $(this).closest('tr').find('td')遍历td并获取值。

$('.fa-edit').on('click', function() {
  $(this).closest('tr').find('td').each(function(e) {  
    console.log($(this).attr("id"),$(this).text());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th width="20%" align="left" valign="middle">Name</th>
      <th width="20%" align="left" valign="middle">Email </th>
      <th width="12%" align="left" valign="middle">Expertise</th>
      <th width="6%" align="right" valign="middle">Action</th>
      <th width="6%" align="left" valign="middle">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left" valign="middle" id='dynamic_name_1'>
        Dynamic User1
      </td>
      <td align="left" valign="middle" id='dynamic_email_1'>
        dynamic_user1@email.com
      </td>
      <td align="left" valign="middle" id='dynamic_skill_1'>
        Skill1
      </td>
      <td align="right" valign="middle">

        <i class="fa fa-edit" id='90'> EDIT</i>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

您可以像这样在有序索引数组中获取所有文本

$('.fa-edit').on('click', function(e){
    let element = $(e.target);
    let arr = element.parent().siblings().text();
    console.log(arr);
    // this will return as 

    // Dynamic User1               :: arr[0]
    // dynamic_user1@email.com     :: arr[1]
    // Skill1                      :: arr[2]
});

Answer 5

尝试一下

$('.fa-edit').on('click', function() {
var name= $(this).closest('tr').children('td:eq(0)').text();  
var email= $(this).closest('tr').children('td:eq(1)').text();  
var skill= $(this).closest('tr').children('td:eq(2)').text();  
});

Answer 6

如果您在td的ID中具有固定的前缀“ dynamic”，则可以执行以下操作。

$('.fa-edit').on('click', function() {
    let answer = [];
    $('[id^="dynamic"]').filter(function() {
        answer.push($(this).text())
    });
    
    alert(answer);
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-condensed">
<thead>
      <tr>
          <th width="20%" align="left" valign="middle">Name</th>
          <th width="20%" align="left" valign="middle">Email </th>
          <th width="12%" align="left" valign="middle">Expertise</th>      
          <th width="6%" align="right" valign="middle">Action</th>
          <th width="6%" align="left" valign="middle">&nbsp;</th>
      </tr>
</thead>
<tbody>
   <tr> 
      <td align="left" valign="middle" id='dynamic_name_1'>Dynamic User1</td>
      <td align="left" valign="middle" id='dynamic_email_1'>dynamic_user1@email.com</td>
      <td align="left" valign="middle" id='dynamic_skill_1'>Skill1</td>
     <td align="right" valign="middle">
     <i class="fa fa-edit" id='90'></i>
     </td> 
  </tr>
</tbody>
</table>

如何以简单的方式获取td值？

6 个答案: