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

＆＃13;

$(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)
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

$(document).ready(function(){
        $("tr").click(function(){
            var id          = $(this).children().next().attr('id');
            var hiddenVal   = $(this).children().find('#changesID').val();
            console.log(id);
            console.log(hiddenVal);
        });
    });

它会起作用

Answer 3

更好的是不使用具有相同id的多个元素，html和javascript中的一些更改。试试这段代码：

<tr>
    <td><input type="hidden" id="changesID" class="changeId" value="no" />A</td>
    <td class="idCol" id='1'>B</td>
    <td>C</td>
    <td>D</td>
</tr>
<tr>
    <td><input type="hidden" id="changesID" class="changeId" value="no" />E</td>
    <td id='2'>F</td>
    <td>G</td>
    <td>H</td>
</tr>

的Javascript

$(document).ready(function () {

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

    var changeCol = $(event.delegateTarget).find(".changeCol");
    var idCol= $(event.delegateTarget).find(".idCol");

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

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

}）;

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

3 个答案: