使用jquery在tr中获取所选td的id

Question

我想获取jquery选择的td的ID。

 $("#ex_rev").find('tr').each(function(i, el) { if (i > 0) { var $tds = $(this).find('td'); var value_of_id = ($tds).attr('id'); year = $tds.eq(0).text(); value1 = $tds.eq(1).find("input").val(); value2 = $tds.eq(2).find("input").val(); value3 = $tds.eq(3).find("input").val(); value4 = $tds.eq(4).find("input").val(); value5 = $tds.eq(5).find("input").val(); value6 = $tds.eq(6).find("input").val(); value7 = $tds.eq(7).find("input").val(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td id="ProfessionMedicale" style="font-size:12px" class="details-text-style2">@(_Exercice.n - 1)</td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.ResComptaConvNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.ResComptaConvNm1.ToString()))</label> @Html.HiddenFor(model => model.ResComptaConvNm1, new { @class = "ex_rev" }) </td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.CotisSocNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.CotisSocNm1.ToString()))</label> @Html.HiddenFor(model => model.CotisSocNm1, new { @class = "ex_rev" }) </td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.ResComptaNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.ResComptaNm1.ToString()))</label> @Html.HiddenFor(model => model.ResComptaNm1, new { @class = "ex_rev" }) </td> <td> <i class="material-icons ripple" onclick="showRevenu (1)" title="Modifier">edit</i> </td> </tr> 

因此，这里我要获取的是var value_of_id id="ProfessionMedicale" ，而$ tds是选择的第一个td。

在value_of_id我没有得到（ id="ProfessionMedicale" ）。

Answer 1

如果要获取ID，请更改var value_of_id = ($tds).attr('id'); 到var value_of_id = $tds.first().attr('id');

var value_of_id = ($tds).attr('id');
                  ^
                  Is missing an $

同样最好只使用$tds.first()获得第一个td元素

工作演示

 $("#ex_rev").find('tr').each(function(i, el) { var $tds = $(this).find('td'); var value_of_id = $tds.first().attr('id'); console.log(value_of_id) year = $tds.eq(0).text(); value1 = $tds.eq(1).find("input").val(); value2 = $tds.eq(2).find("input").val(); value3 = $tds.eq(3).find("input").val(); value4 = $tds.eq(4).find("input").val(); value5 = $tds.eq(5).find("input").val(); value6 = $tds.eq(6).find("input").val(); value7 = $tds.eq(7).find("input").val(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="ex_rev"> <tbody> <tr> <td id="ProfessionMedicale" style="font-size:12px" class="details-text-style2">@(_Exercice.n - 1)</td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.ResComptaConvNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.ResComptaConvNm1.ToString()))</label> @Html.HiddenFor(model => model.ResComptaConvNm1, new { @class = "ex_rev" }) </td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.CotisSocNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.CotisSocNm1.ToString()))</label> @Html.HiddenFor(model => model.CotisSocNm1, new { @class = "ex_rev" }) </td> <td style="font-size:12px"> @Html.TextBoxFor(model => model.ResComptaNm1, new { @id = "app_exercice_details_inputs_index_1", @Style = "border-width: 0px 0px 1px 0px;display:none;width:70px;", @class = "number" }) <label id="app_exercice_details_span_index_1">@(TnsHelper.FormatDecimal(Model.ResComptaNm1.ToString()))</label> @Html.HiddenFor(model => model.ResComptaNm1, new { @class = "ex_rev" }) </td> <td> <i class="material-icons ripple" onclick="showRevenu (1)" title="Modifier">edit</i> </td> </tr> </tbody> </table> 

Answer 2

因此，这里我要获取的是var value_of_id中的id =“ ProfessionMedicale”，而$ tds是选择的第一个td 。

当只需要第一个选择器时， .find('td')的选择器.find('td')将返回该行的所有td。

您可以使用:first选择器或jQuery方法.first()例如：

$(this).find('td:first').prop('id');
$(this).find('td').first().prop('id');

工作片段：

 $("#ex_rev").find('tr').each(function(i, el) { if (i > 0) { var $tds = $(this).find('td:first'); var value_of_id = $tds.attr('id'); console.log(value_of_id); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="ex_rev" border=1> <tr> <th>FIRST TH</th> <th>SECOND TH</th> </tr> <tr> <td id="ProfessionMedicale" style="font-size:12px" class="details-text-style2">FIRST TD</td> <td style="font-size:12px">SECOND TD </td> </tr> </table>