使用 jQuery 选择表中的下一个 <td>

Select the next <td> in a table using jQuery

提问by Leron_says_get_back_Monica

I am working on an asp.net mvc 3 application. I am building table dynamically with a data from database. I have a certain case when the third column/cell from a row is a dropdown :

我正在开发一个 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>

In this case the fourth column/cell stays empty and if the user select 3(Not Applicable) in the fourth cell should be shown a textbox where the user can write additional information. I have poor knowledge in JS and jQuery, however I find out how to get the selected value from a dropdown :

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

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

But now instead the alert I need to check if the value is 3(this is the far I can go by myself) and to show/hide or append/remove a textbox from the next cell or if we talk in a DOM prespective.

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

So how can I navigate to the next to the one with class=YesNoNotApplicable and what is the best way to deal with this text box - to put it in the while I'm creating the table and then to show/hide it or to deal with it during run time and append/remove it and how could I do that?

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

回答by emre nevayeshirazi

If you are using strongly typed model and html helpers for your view, it would probably better to create input element while creating the table. The reason is the elements you would create via jQuery won't be bound to your model.

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

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

回答by T.J. Crowder

Within the changecallback, thiswill refer to the selectelement. So you can find the tdcontaining it with closest, and then the next tdvia next(since you knowthe next thing is a td, this is a table), like this:

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

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

In the more general case where you want to do something similar but not in a table, and the sibling you want to find may be more than one element away, you might use nextAll("selector").first(). But if the thing you want is the next element, and you're sure of that, you don't need nextAll.

在更一般的情况下，您想要执行类似但不在表中的操作，并且您想要查找的兄弟元素可能与多个元素相距不远，您可以使用nextAll("selector").first(). 但是，如果您想要的是下一个元素，并且您确定这一点，则不需要nextAll.

回答by Mohammad Adil

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

回答by Hien Nguyen

You also can use siblings()method to get next tdtag

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

回答by sergioadh

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

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

And you can then work with the next cel.

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