Question

我试图通过点击相应的按钮来启用文本框，但我点击任何按钮它总是启用第一个文本框，我不想在这里使用'id'

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("table tr").click(function() 
{
//alert( this.rowIndex );
$('#button1').prop('disabled', false);
 });
});

</script>
</head>
<table>
<tr> 
    <td> <input type="text" name="test" id="button1" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td>

</tr>
<tr> 
    <td> <input type="text" name="test" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td> 
</tr>
<tr>
    <td> <input type="text" name="test" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td> 
</tr>
</table>
</html>

有什么方法可以使用row index函数吗？

Answer 1

您可以在不使用ID的情况下执行此操作。逻辑是访问按钮的父级，然后访问其前一个元素，然后在其中找到文本输入元素。

工作代码段：

$(document).ready(function() {
  $("input[type=button]").click(function(){
    console.log("editing");
    $(this).parent().prev().find("input[type=text]").attr('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr> 
    <td> <input type="text" name="test" id="button1" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td>

  </tr>
  <tr> 
    <td> <input type="text" name="test" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td> 
  </tr>
  <tr>
    <td> <input type="text" name="test" disabled value="Edit"/> </td>
    <td> <input type="button" name="test" value="Edit"/> </td> 
  </tr>
</table>

Answer 2

首先，使用标记类型或类来标识行中的input元素。使用id代码，您尝试保持DRY是违反直觉的。

<table>
    <tr>
        <td>
            <input type="text" name="test" disabled="true" value="Edit" />
        </td>
        <td>
            <input type="button" name="test" value="Edit" />
        </td>
    </tr>
    <!-- Repeated HTML... -->
</table>

然后，您可以使用上下文选择器仅查找所点击的input中的tr元素：

$("table tr").click(function () {
    $('input', this).prop('disabled', false);
});

Example fiddle

Answer 3

将您的代码更改为：

$(document).ready(function() 
{
   $("table tr").click(function() 
   {
      //alert( this.rowIndex );
      $(this).find("input[type=text]").prop('disabled', false);
   });
});

Answer 4

它始终启用第一个文本框，因为您始终在button1上更改disabled属性的值。您可以为每个输入按钮使用onclick属性，并在此处添加此代码：

var current_tr = $(this).parent();
var editable_input = current_tr.children(':first').prop('disabled', false);

因此每个输入按钮变为：

<td> <input type="button" name="test" value="Edit" onclick="var current_tr = $(this).parent(); current_tr.children(':first').prop('disabled', false);" /> </td>

Answer 5

您可以使用：

$("table tr td input[type='button']").click(function() {
    $(this).closest('tr').find('td').first().find('input[type="text"]').prop('disabled', false);
});

如何在特定行中启用文本框？

5 个答案: