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

How to enable textbox in a particular row?

本文关键字：启用 文本      更新时间：2023-09-26

我正在尝试通过单击相应的按钮来启用文本框，但我单击任何按钮它总是启用第一个文本框，我不想在这里使用"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功能吗？

您可以在不使用 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>

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

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

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

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

示例小提琴

将代码更改为： 

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

它始终启用第一个文本框，因为您正在更改 button1 上始终禁用属性的值。您可以为每个输入按钮使用 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>

您可以使用它：

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