如何从buttonclick

Question

我有一个带有输入字段的表单，其中readonly为真。

我还有一个编辑按钮，我想这样做，以便在单击编辑按钮时，该行的所有输入字段都将只读为false， 但我不知道如何定位此TR中的所有TD＆gt;输入。

感谢。

代码。

<tr>
<td>
    <img src="http://placehold.it/150x150" alt="">
</td>
<td>
    <input name="textinput" placeholder="" value="Olympus E-M1 mark II Body" class="" type="text" style="width: 100%;" readonly>
</td>
<td>
    <input name="textinput" placeholder="" value="Olympus" class="" type="text" style="width: 100%;" readonly>
</td>
<td>
    <input name="textinput" placeholder="" value="1" class="" type="text" style="width: 100%;" readonly>
</td>
<td>
    <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly>
</td>
<td class="total-price">
    <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly>
</td>
<td>
    <a href="#">
        // The edit button
        <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i>
    </a>
    <a href="#">
        <i class="fa fa-trash" style="color: #C7225C; font-size: 20px;"></i>
    </a>
</td>

Answer 1

将HTML修改为

<a href="#" class="edit">
    // The edit button
    <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i>
</a>

使用编辑按钮附加事件处理程序，然后使用.closest()遍历到tr。之后.find()可用于将:input定位到removeProp()

$('.edit').on('click', function(e){
    e.preventDefault()
    $(this).closest('tr').find(':input').removeProp('readonly');
})

Answer 2

使用
$('input[name=textinput]').removeProp('readonly');
或尝试
$('input[name=textinput]').removeAttr('readonly');

看看这个https://jsfiddle.net/shantaram/fhde3d06/

Answer 3

$('.fa-edit').parent().click(function(e) {
  e.preventDefault()
  $(this).closest('tr').find('input').removeAttr('readonly')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td>
      <img src="http://placehold.it/150x150" alt="">
    </td>
    <td>
      <input name="textinput" placeholder="" value="Olympus E-M1 mark II Body" class="" type="text" style="width: 100%;" readonly>
    </td>
    <td>
      <input name="textinput" placeholder="" value="Olympus" class="" type="text" style="width: 100%;" readonly>
    </td>
    <td>
      <input name="textinput" placeholder="" value="1" class="" type="text" style="width: 100%;" readonly>
    </td>
    <td>
      <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly>
    </td>
    <td class="total-price">
      <input name="textinput" placeholder="" value="&euro; 1999,00" class="" type="text" style="width: 100%;" readonly>
    </td>
    <td>
      <a href="#">
        // The edit button
        <i class="fa fa-edit" style="color: #C7225C; font-size: 20px;"></i>
    </a>
      <a href="#">
        <i class="fa fa-trash" style="color: #C7225C; font-size: 20px;"></i>
      </a>
    </td>

</table>

使用.removeAttr()

  

描述：从匹配元素集中的每个元素中删除一个属性。

注：

1. 如果动态添加使用事件委托
2. 我添加了click to anchor标记，因此我添加了.parent()

Answer 4

{{1}}

您可以尝试使用prop而不是attr。