Get Id of selected td in tr with jquery

Question

I want to get the Id of the td selected with jquery.

 $("#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> 

So here what I want is to get id="ProfessionMedicale" in var value_of_id and $tds is the first td selected.

In value_of_id I didn't get ( id="ProfessionMedicale" ).

Answer 1

If you want to get the ID, then change var value_of_id = ($tds).attr('id'); to var value_of_id = $tds.first().attr('id');

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

Also it would be better to just use $tds.first() to get the first td element

Working Demo

 $("#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

So here what i want is to get id="ProfessionMedicale" in var value_of_id and $tds is the first td selected .

The selector .find('td') you're using will return all the td's of the row when you need just the first one.

You could to use :first selector or the jQuery method .first() like:

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

Working Snippet:

 $("#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>