通过indexRow

Question

我有这段代码：

＆＃13;

＆＃13;

function getValue(elt) {
  index = elt.parentNode.parentNode.parentNode.rowIndex;
  console.log(index)
  //display the id of input type="hidden"

}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>
        <dd id="calOp_id_1-element">
          <input name="calOp_id_1" value="1" id="calOp_id_1" type="hidden"></dd>
        <dd>
          <input name="calOp_date_debut_1" id="calOp_date_debut_1" value="02/04/2018" class="inlineBlock large  hasDatepicker" maxlength="10" style="width: 72px" readonly="readonly" type="text"></dd>
      </td>
      <td>
        <td>
          <dd id="calOp_1-element">
            <button name="calOp_1" id="calOp_1" type="button" onclick="getValue(this)">OK</button></dd>
        </td>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

我希望显示输入类型的ID =＆＃34;隐藏＆＃34; （calOp_id_1）当我点击按钮确定

Answer 1

  

当我点击indexRow的OK按钮时，我希望显示输入类型=“隐藏”（calOp_id_1）的id。

• 但是，我不明白，您可以使用属性rowIndex获取该索引。
• 使用函数closest获取所点击按钮的父元素，在本例中为当前tr。

function getValue(elt) {
  var tr = elt.closest('tr');
  console.log("index:", tr.rowIndex);
  var hidden = tr.querySelector('[type="hidden"]');
  var value = hidden.value;
  var id = hidden.id;
  console.log("Value:", value, "- Id:", id)
  //display the id of input type="hidden"
}

<table>
  <tbody>
    <tr>
      <td>
        <dd id="calOp_id_1-element">
          <input name="calOp_id_1" value="1" id="calOp_id_1" type="hidden"></dd>
        <dd>
          <input name="calOp_date_debut_1" id="calOp_date_debut_1" value="02/04/2018" class="inlineBlock large  hasDatepicker" maxlength="10" style="width: 72px" readonly="readonly" type="text"></dd>
      </td>
      <td>
        <td>
          <dd id="calOp_1-element">
            <button name="calOp_1" id="calOp_1" type="button" onclick="getValue(this)">OK#Index0</button></dd>
        </td>
      </td>
    </tr>
    <tr>
      <td>
        <dd id="calOp_id_2-element">
          <input name="calOp_id_2" value="1" id="calOp_id_2" type="hidden"></dd>
        <dd>
          <input name="calOp_date_debut_2" id="calOp_date_debut_2" value="02/04/2018" class="inlineBlock large  hasDatepicker" maxlength="10" style="width: 72px" readonly="readonly" type="text"></dd>
      </td>
      <td>
        <td>
          <dd id="calOp_2-element">
            <button name="calOp_2" id="calOp_2" type="button" onclick="getValue(this)">OK#Index1</button></dd>
        </td>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您可以将Element#closest与Element#querySelector结合使用：

• .closest('tr')在元素的父母中找到最接近的tr。

• .querySelector('td:first-of-type>dd>input')选择此表中的输入

function getValue(e){
  console.log(e.closest('tr').querySelector('td:first-of-type>dd>input').id);
}

<table>
  <tbody>
    <tr>
      <td>
        <dd id="calOp_id_1-element">
          <input name="calOp_id_1" value="1" id="calOp_id_1" type="hidden"></dd>
        <dd>
          <input name="calOp_date_debut_1" id="calOp_date_debut_1" value="02/04/2018" class="inlineBlock large  hasDatepicker" maxlength="10" style="width: 72px" readonly="readonly" type="text"></dd>
      </td>
      <td>
        <dd id="calOp_1-element">
          <button name="calOp_1" id="calOp_1" type="button" onclick="getValue(this)">OK</button></dd>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

因为这看起来像是自动html输出，所以带有id＆＃34; calOp_1＆＃34;的按钮将与id＆＃34; calOp_id_1＆＃34;的隐藏元素相关联你可以简单地拆分以构建id并通过id选择它。

＆＃13;

＆＃13;

function getValue(elt) {
  var name = elt.id.split("_");
  var hiddenID = name[0] + "_id_" + name[1];
  var hidden = document.getElementById(hiddenID);

  console.info(hiddenID + "=" + hidden.value);
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>
        <dd id="calOp_id_1-element">
          <input name="calOp_id_1" value="1" id="calOp_id_1" type="hidden"></dd>
        <dd>
          <input name="calOp_date_debut_1" id="calOp_date_debut_1" value="02/04/2018" class="inlineBlock large  hasDatepicker" maxlength="10" style="width: 72px" readonly="readonly" type="text"></dd>
      </td>
      <td>
        <td>
          <dd id="calOp_1-element">
            <button name="calOp_1" id="calOp_1" type="button" onclick="getValue(this)">OK</button></dd>
        </td>

    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在您的HTML中

，请将其删除：onclick="getValue(this)"

并在js文件中输入：

$("table button").click(function(){
       var val = $(this).closest("tr").find("input[type='hidden']").val();
       var id = $(this).closest("tr").find("input[type='hidden']").attr('id');
       console.log(val , id);
});