javascript - 获取不同列中的隐藏输入[type=hidden]

Question

我有一些关于如何在不同列中获取隐藏输入字段的小问题。下面是我的代码仅供引用。

<table class="table table-bordered table-striped table-condensed" id="table_data">
        <thead class="header">
            <tr class="well">
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="hidden" id="changesID" value="no" />A</td>
                <td id='1'>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td><input type="hidden" id="changesID" value="no" />E</td>
                <td id='2'>F</td>
                <td>G</td>
                <td>H</td>
            </tr>
            <tr>
                <td><input type="hidden" id="changesID" value="no" />I</td>
                <td id='3'>J</td>
                <td>K</td>
                <td>L</td>
            </tr>
        </tbody>
    </table>

Javascript

$(document).ready(function () {

$('table').on( 'click', 'tbody td:not(:first-child)', function (e) {

        var id = $(this).attr('id');                
        console.log(id)
    });
});

当我单击第二列时，它应该显示位于第一列的 id 和隐藏输入字段

1
no

有人知道吗？任何帮助将不胜感激。谢谢 https://jsfiddle.net/ash_systm/05y977vf/

Answer 1

$(this).prev().children()[0].value

$(document).ready(function() {

  $('table').on('click', 'tbody td:not(:first-child)', function(e) {
    var id = $(this).attr('id');
    console.log(id)
    var val = $(this).prev().children()[0].value;
    console.log(val)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-condensed" id="table_data">
  <thead class="header">
    <tr class="well">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="hidden" id="changesID" value="no" />A</td>
      <td id='1'>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="changesID" value="no" />E</td>
      <td id='2'>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="changesID" value="no" />I</td>
      <td id='3'>J</td>
      <td>K</td>
      <td>L</td>
    </tr>
  </tbody>
</table>