关于一个很纠结的jQuery获取table子控件数据的有关问题
日期：2014-05-16 浏览次数：20718 次
关于一个很纠结的jQuery获取table子控件数据的问题
有一个五行五列的table，代码如下：
这个表的特点是：只有对角线右上select控件，对角线全是1，下三角空。select控件都是有class属性的。
有两个问题：
1.如果我选定某行i某列j中的某一个select控件（i=3，j=5，行列数均从1开始），如何确定“前面”所有的select控件数量。“前面”只得是以行有限原则遍历，直到遍历到选中的select。
2.如何获取选中的select所在列的表头文字。
------解决方案--------------------
有一个五行五列的table，代码如下：
- HTML code
<table width="385" height="370" border="3">
<tr>
<td width="41"> </td>
<td width="65">A</td>
<td width="69">B</td>
<td width="82">C</td>
<td width="90">D</td>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td><select class="s1"><option>1</option><option>2</option><option>3</option></select></td>
<td><select class="s1"><option>1</option><option>2</option><option>3</option></select>;</td>
<td><select class="s1" name="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>B</td>
<td> </td>
<td>1</td>
<td><select class="s1" name="select2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td><select class="s1" name="select3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>C</td>
<td> </td>
<td> </td>
<td>1</td>
<td><select class="s1" name="select4">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>D</td>
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
</tr>
</table>
这个表的特点是：只有对角线右上select控件，对角线全是1，下三角空。select控件都是有class属性的。
有两个问题：
1.如果我选定某行i某列j中的某一个select控件（i=3，j=5，行列数均从1开始），如何确定“前面”所有的select控件数量。“前面”只得是以行有限原则遍历，直到遍历到选中的select。
2.如何获取选中的select所在列的表头文字。
------解决方案--------------------
- HTML code
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('select').change(function(){
var sel=$(this)
,td=sel.parent()
,table=td.closest('table')
,headTR=table.find('tr:first')//表头对象
cellIndex=td.get(0).cellIndex//所在列
,totalSel=0;
sel=sel.get(0)
table.find('select').each(function(){
if(this==sel)return false;
totalSel++;
});
alert('前面的select数量：'+totalSel)
alert('表头：'+headTR.find('td:eq('+cellIndex+')').html())
});
});
</script>
<table width="385" height="370" border="3">
<tr>
<td width="41"> </td>
<td width="65">A</td>
<td width="69">B</td>
<td width="82">C</td>
<td width="90">D</td>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td><select class="s1"><option>1</option><option>2</option><option>3</option></select></td>
<td><select class="s1"><option>1</option><
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
