javascript - 如何将相同的 javascript/jquery 应用于其他输入行

Question

我是 Javascript 和 jQuery 新手。我试图将相同的代码应用于表中的每个输入行。

该表中输入行的 HTML 为:

<tr>
  <td>Seller1</td>
  <td><input type="text" placeholder="" class="form-control" name="text1"></td>
  <td><input type="text" placeholder="" class="form-control text2" id="text2">
  </td>
</tr>

启用/禁用该行第二列(text2)的 Javascript/JQuery 代码是:

/*text field enable*/

$('#text2').attr('disabled',true);
$('input[name="text1"]').keyup(function(){
    $('#text2').prop('disabled', this.value == "" ? true : false); 
});

谢谢

Answer 1

这里是一个能够处理多行的代码片段。依赖于类名而不是“name”或“id”属性

$(function(){
    $('.text2').prop('disabled', true);
    $('table input.text1').keyup(function(e) {
        var show = $(this).val() == "" ? true : false;
        $(this).parent().parent().find('input.text2').prop('disabled', show);
    });

});

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

<table>
  <tr>
    <td>Seller1</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
  <tr>
    <td>Seller2</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
  <tr>
    <td>Seller3</td>
    <td><input type="text" placeholder="" class="form-control text1"></td>
    <td><input type="text" placeholder="" class="form-control text2"></td>
  </tr>
</table>