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

时间:2018-10-24 11:29:08

标签: javascript jquery html

我想获取用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>

因此,我要获得的是 id="ProfessionMedicale" 中的 var value_of_id ,而 $ tds 是第一个选择。

value_of_id中我没有得到(id="ProfessionMedicale")。

2 个答案:

答案 0 :(得分:0)

如果要获取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>

答案 1 :(得分:0)

  

所以在这里,我要获取的是var value_of_id和$ tds中的id =“ ProfessionMedicale”,第一个选择的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>