jquery - 使用 jQuery 在表格中选择下一个

Question

我正在开发一个 asp.net mvc 3 应用程序。我正在使用数据库中的数据动态构建表。当行中的第三列/单元格是下拉列表时，我有某种情况：

<select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select>

在这种情况下，第四列/单元格保持为空，如果用户在第四个单元格中选择 3（不适用），则应显示一个文本框，用户可以在其中编写其他信息。我对 JS 和 jQuery 的了解很少，但是我知道如何从下拉列表中获取选定的值：

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            alert($('.YesNoNotApplicable').val());
        });
    });

但是现在我需要检查该值是否为 3（这是我自己可以走的最远）并显示/隐藏或附加/删除下一个单元格中的文本框，或者我们是否在 DOM 中交谈。

那么如何导航到带有 class=YesNoNotApplicable 的下一个以及处理此文本框的最佳方法是什么 - 在我创建表格时将其放入然后显示/隐藏它或处理在运行时使用它并附加/删除它，我该怎么做？

Answer 1

如果您在视图中使用强类型模型和 html 帮助器，那么在创建表格时创建输入元素可能会更好。原因是您将通过 jQuery 创建的元素不会绑定到您的模型。

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3")
         $(this).closest('td').next('td').find('input').show();
   });
});

Answer 2

在change回调中，this将引用select元素。所以你可以找到td包含它的closest，然后是下一个tdvia next（因为你知道下一个是 a td，这是一个表），如下所示：

var $nextTD = $(this).closest('td').next();

在更一般的情况下，您想要做类似但不在表格中的事情，并且您想要找到的兄弟可能不止一个元素，您可以使用nextAll("selector").first(). 但是，如果您想要的是下一个元素，并且您确定这一点，则不需要nextAll.

Answer 3

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3"){
         $(this).closest('td').next('td').find('input:text').show();
       }
   });
});

Answer 4

您也可以使用siblings()方法获取下一个td标签

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            if($('.YesNoNotApplicable').val() == '3'){
               $(this).closest('td').siblings().find('input').show();
            }
        });
    });

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            if($('.YesNoNotApplicable').val() == '3'){
               $(this).closest('td').siblings().find('input').show();
            }
        });
    });

#notapplicable{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td><select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select></td>
     <td><input type='text' id='notapplicable' /></td>
  </tr>
  
  
</table>

Answer 5

var nextCell = $(this).closest('td').next();

然后您可以使用下一个 cel。