jQuery 点击table一行 并对当前行的某一列进行修改

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）来获取最终的数据！