jQuery 点击table一行 并对当前行的某一列进行修改,共有三种:table行列中只有数据;嵌入input/select/等标签;级联修改最后一列数据
1. 当前行当前列中只有数据
js
window.onload=function(){
//焦点离开事件
//也可以是click事件
$('tr').focusout(function(){
//获取当前点击的行的**子节点(列)**中的数据
//0表示第一列
var data1=$(this).children('td').eq(0).text();
var data2=$(this).children('td').eq(1).text();
});
html
<tr>
<td>1234</td>
<td>Hello</td>
</tr>
结果
1234
Hello
2. 当前行当前列中嵌入input/select等标签
js
window.onload=function(){
//焦点离开事件
$('tr').focusout(function(){
//获取点击当前行的当前子节点(列),的子节点中input(select)中的数据
//0表示第一列
var data1=$(this).children('td').eq(0).children('input').val();
var data2=$(this).children('td').eq(1).children('select').val();
//其他标签依次类推
});
html
<tr>
<td><input type="text" value="1234"/></td>
<td>
<select>
<option>良好</option>
<option>优秀</option>
<option>不合格</option>
</select>
</td>
</tr>
输入值或直接获取
结果
1234
良好
3. 实际应用:分别点击三个列,并修改第四列数据
js
window.onload=function(){
//焦点离开事件
$('tr').focusout(function(){
//获取第一列数据
var data1=$(this).children('td').eq(0).children('input').val();
//获取第二列数据
var data2=$(this).children('td').eq(1).children('select').val();
//获取第三列数据
var data3=$(this).children('td').eq(2).children('select').val()
//下面是个人逻辑代码,第四列的数据和前三个列有关(仅供参考)
var score=data1*2*0.5;
if(score>5){
score=5;
}
if(data2=="优秀"){
data2=10;
}else if(data2=="良好"){
data2=5;
}else if(data2=="不及格"){
data2=0;
}
if(data3=="优秀"){
data3=10;
}else if(data3=="良好"){
data3=5;
}else if(data3=="不及格"){
data3=0;
}
var total=score+data2*0.2+data3*0.3;
//修改最后一列的数据
$(this).children('td').eq(3).text(total);
});
html
<tr>
<td><input type="text" value="1234"/></td>
<td>
<select>
<option>良好</option>
<option>优秀</option>
<option>不合格</option>
</select>
</td>
<td>
<select>
<option>良好</option>
<option>优秀</option>
<option>不合格</option>
</select>
</td>
<td></td>
</tr>
效果图
4. 总结
本文中最重要的知识点,js的层级关系,可以通过得到当前对象的children,进而获取子节点的数据,也可以通过子节点的子节点(children的children)来获取最终的数据!