2013-03-13 73 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'); 
} 
} 
相关问题