定位< td>从它的父母< tr>与数据属性使用jQuery [英] Targetting a <td> from it's parents <tr> with data-attributes using jquery

问题描述

我正在开发一个可编辑的表格功能，如上一篇文章中所述：表格中的可编辑行 - 正在使用< tr>元素坏习惯？

我有以下标记：

 < tr data-id =2> 
< td> Foo< / td> 
< td>< button class =editBtn>编辑< /按钮>< / td> 
< / tr> 
< tr data-id =3> 
< td> Bar< / td> 
< td>< button class =editBtn>编辑< /按钮>< / td> 
< / tr> 
  

使用jquery，我已经能够计算出我正在编辑哪一行， c $ c> .editBtn ，然后使用以下内容来计算出哪些是 data-id 元素：

  $（'。editBtn'）。click（function（）{
 id =（$（this）.closest（'tr'）。data （'id'））; 
 console.log（id）; 
}）; 
  

我不明白的是这个ID如何定位 td 其中有我的类别名称的元素（在本例中为Foo和Bar）？

我希望能够这些内容并将它们放置在可编辑字段中：

 < td>< input type =textvalue = foo 的>< / TD> 
  

我也需要在此处将'编辑'按钮更改为'保存'按钮点，用不同的类名称，例如

 < td>< button class =saveBtn>保存< /按钮>< / td> 
  

我该怎么做？

find（）以及：first （或：eq（0））来获得行内的第一个 td 。您还可以分别使用 text（）和 addClass（）更改单击按钮的文本和类别。最后，您可以将内容添加到 td 中，将其放入 input 中。试试这个：
$ b

$（'。editBtn'）。click（function ）{var $ button = $（this）.addClass（'save'）。text（'Save'）; var $ tr = $ button.closest（'tr'）; var id = $ tr.data（'id' ）; var $ td = $ tr.find（'td：first'）; $ td.html（'< input value =''+ $ td.text（）+'/>'）;}）;

< script src =https：// ajax。 googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><table> < tr data-id =2> < TD>富< / TD> < TD> < button class =editBtn>编辑< / button> < / TD> < / TR> < tr data-id =3> < TD>巴≤; / TD> < TD> < button class =editBtn>编辑< / button> < / TD> < / table>

I'm developing an editable table feature as described in a previous post: Editable row in a table - is using the record ID on a <tr> element bad practice?

I've got the following markup:

<tr data-id="2">
    <td>Foo</td>
    <td><button class="editBtn">Edit</button></td>
</tr>
<tr data-id="3">
    <td>Bar</td>
    <td><button class="editBtn">Edit</button></td>
</tr>

Using jquery I've been able to work out which row I'm editing by targeting the .editBtn and then using the following to work out which is the data-id element:

$('.editBtn').click(function() {
    id = ($(this).closest('tr').data('id'));
    console.log(id);
});

What I don't understand is given this ID how can I then target the td element which has my category name in it (Foo and Bar, in this example)?

I want to be able to take the content in these and place them in an editable field thus:

<td><input type="text" value="Foo"></td>

I also need to be able to change the 'Edit' button to a 'Save' button at this point, with a different class name, e.g.

<td><button class="saveBtn">Save</button></td>

How can I do this?

解决方案

You can use find() along with :first (or :eq(0)) to get the first td within the row. You can also change the text and class of the clicked button using text() and addClass() respectively. Finally you can place the content in an input by appending it to the td. Try this:

$('.editBtn').click(function() {
  var $button = $(this).addClass('save').text('Save');
  var $tr = $button.closest('tr');
  var id = $tr.data('id');
  var $td = $tr.find('td:first');
  
  $td.html('<input value="' + $td.text() + '" />');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-id="2">
    <td>Foo</td>
    <td>
      <button class="editBtn">Edit</button>
    </td>
  </tr>
  <tr data-id="3">
    <td>Bar</td>
    <td>
      <button class="editBtn">Edit</button>
    </td>
  </tr>
</table>

这篇关于定位&lt; td&gt;从它的父母&lt; tr&gt;与数据属性使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！