2016-07-25 51 views
1

我有一些關於如何在不同列中獲取隱藏輸入字段的小問題。以下是我的代碼僅供您參考。在不同列中獲得隱藏輸入[type = hidden]

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

+0

_「當我點擊第二欄應該顯示ID和位於第一列隱藏輸入字段」 _你是想排除單擊處理第一'tr' ,但是在第二個'tr'點擊時記錄第一個'tr''輸入'值?請注意,'document'中的'id'應該是唯一的;問題 – guest271314

+0

在'html'處有重複'changesID''id',您能否對預期輸出做更具體的描述? '「當我點擊第二列時,它應該顯示位於第一列的id和隱藏輸入字段」 – Iceman

+0

@Iceman「,當我點擊第二列時,它將在第二列顯示值id,並在第一列顯示值隱藏字段。所以在console.log()當我點擊第一行時,在第二列它將顯示1,否 – art

回答

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>

+0

爲什麼會顯示此錯誤gen_files:797未捕獲TypeError:無法讀取undefined @Iceman的屬性'值' – art

+1

哪列你點擊@art – Iceman

+0

第二列@Iceman – art

0

試試這個:

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

它將工作

0

更好地不使用多個元素具有相同的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) 
}); 

});