如何以简单的方式获取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);
});

<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);
});

请给我一个非常简单的方法来实现这一点。提前谢谢。

尝试这个简单的解决方案

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);

您可以使用每个$(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>

let values = [];
$('button').click(function()
{
$('td').each(function()
{
values.push($(this).text())
})
});
console.log(values);

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

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

$('.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]
});

试试这个

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

如果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>

相关内容

最新更新

热门标签：