2013-03-13 70 views
1

我正在研究FlexiGrid並且很少遇到腳本問題。我成功創建了一個FlexiGrid並添加了複選框。點擊複選框,我想選擇所需的行。點擊任何一行時,它會在<tr id="row101" class="trSelected">中設置class ='trSelected'。我已經嘗試了一些腳本來設置複選框點擊,但沒有工作。請讓我知道如何解決這個問題。在複選框中點擊Fexigrid獲取表格行ID值?

<script type="text/javascript"> 
function checkedCall() { 
if($('#checkNote').is(':checked')){ 
    //$("#tblflex > tr:first").addClass("trSelected"); 
    //$(this).parents('tr:first').addClass('trSelected'); 
    alert('Selected' + $(this).parents('tr:first').attr('id')); //unable to find the ID 
}else{ 
    alert('NOTSelected'); 
    //$("#tblflex > tr:first").removeClass("trSelected"); 
    //$(this).parents('tr:first').removeClass('trSelected'); 
} 
} 

HTML代碼:

<table id="tblflex" class="flexCLS" style="display: table;" border="0"> 
<tbody> 
    <tr id="row101"> 
    <td align="left"> 
    <div style="text-align: left; width: 40px;"> 
    <input type="checkbox" id="checkNote" onclick="checkedCall();"> 
    </div> 
    </td> 
</tr> 
    <tr id="row187"> 
    <td align="left"> 
    <div style="text-align: left; width: 40px;"> 
    <input type="checkbox" id="checkNote" onclick="checkedCall();"> 
    </div> 
</td> 
</tr> 

的感謝!

回答

0

問題是,你所有的複選框都有相同的ID「checkNote」。

這是一個建議的解決方案

HTML

<table id="tblflex" class="flexCLS" style="display: table;" border="0"> 
<tbody> 
    <tr id="row101"> 
    <td align="left"> 
    <div style="text-align: left; width: 40px;"> 
    <input type="checkbox" id="checkNote101" onclick="checkedCall(this);"> 
    </div> 
    </td> 
</tr> 
    <tr id="row187"> 
    <td align="left"> 
    <div style="text-align: left; width: 40px;"> 
    <input type="checkbox" id="checkNote187" onclick="checkedCall(this);"> 
    </div> 
</td> 
</tr> 

而且JS代碼

<script type="text/javascript"> 
function checkedCall(this) { 
if($(this).is(':checked')){ 
    //$("#tblflex > tr:first").addClass("trSelected"); 
    //$(this).parents('tr:first').addClass('trSelected'); 
    alert('Selected' + $(this).parents('tr:first').attr('id')); //unable to find the ID 
}else{ 
    alert('NOTSelected'); 
    //$("#tblflex > tr:first").removeClass("trSelected"); 
    //$(this).parents('tr:first').removeClass('trSelected'); 
} 
} 
相關問題