jquery获取tr中控件值并操作tr实现思路

获取tr中控件的值并操作tr的思路可以分为以下几步：

1. 给tr或者里面的控件元素添加个唯一的class或者id，方便jquery进行定位。
2. 使用jquery的选择器，选择tr元素或者它里面的控件元素。
3. 通过jquery的val()方法获取控件的值。
4. 在获取到控件值后，就可以对tr元素进行操作，例如：修改tr元素的样式、添加或删除tr元素等。

以下是具体的示例说明：

1. 示例1：获取tr中第一个input控件的值并进行操作

<!-- HTML代码 -->
<table>
  <tr>
    <td><input type="text" value="123"></td>
    <td><button class="btn">操作</button></td>
  </tr>
  <tr>
    <td><input type="text" value="456"></td>
    <td><button class="btn">操作</button></td>
  </tr>
</table>

<!-- jquery代码 -->
$(function() {
  $(".btn").click(function() {
    var val = $(this).closest("tr").find("input:first").val();
    // 获取tr元素中第一个input控件的值
    console.log(val);
    // 在控制台中输出获取到的值，方便调试
    $(this).closest("tr").css("background-color", "red");
    // 修改获取到的tr元素的背景颜色
  });
});

在上面的示例中，我们使用了closest()方法和find()方法来获取控件的值和操作tr元素。closest()方法用于获取最近的外层元素，需要传入一个CSS选择器或者jquery元素；find()方法用于找到与选择器匹配的子元素。

1. 示例2：获取tr中指定class的控件的值并进行操作

<!-- HTML代码 -->
<table>
  <tr>
    <td><input type="text" class="username" value="user1"></td>
    <td><input type="text" class="age" value="18"></td>
    <td><button class="btn">操作</button></td>
  </tr>
  <tr>
    <td><input type="text" class="username" value="user2"></td>
    <td><input type="text" class="age" value="20"></td>
    <td><button class="btn">操作</button></td>
  </tr>
</table>

<!-- jquery代码 -->
$(function() {
  $(".btn").click(function() {
    var username = $(this).closest("tr").find(".username").val();
    // 获取tr元素中class为username的控件的值
    var age = $(this).closest("tr").find(".age").val();
    // 获取tr元素中class为age的控件的值
    console.log("username: " + username + ", age: " + age);
    // 在控制台中输出获取到的值，方便调试
    $(this).closest("tr").remove();
    // 移除获取到的tr元素
  });
});

在上面的示例中，我们使用了find()方法和.val()方法来获取控件的值，并使用remove()方法来移除获取到的tr元素。.username和.age都是我们添加到input控件中的class名，方便对应获取。