一、需求
需求比较简单，就是先修改第一列中age下面的input中的值，然后点击age这个submit按钮，会将这一列中所有的值都修改称第一列中age对应的值，如上图所示；
二、实现
1、针对这个需求，我第一反应就是先获取第一列age这列对应的value，然后用这个值给其他行的这一列的value进行赋值；所以我的代码实现如下：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
//根据第一行的字段值，统一修改其他行中的值
function allmodifyage(id){
var inputs = document.getElementById(id).getElementsByTagName("input");
var modify_value = 0;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == "text" ){
var checkRow = inputs[i];
var tr = checkRow.parentNode.parentNode;
var tds = tr.cells;
if( i == 1){
//获取第一行中age的值，如果使用input这种方式的话，有可能第一行对应的i不是1，而是看上面有多少input元素，保险情况可以直接获取表的第一行的这一列的值
modify_value = tds[2].getElementsByTagName("input")[0].value;
}
//给其他行的这列的元素进行赋值
tds[2].getElementsByTagName("input")[0].value = modify_value;
}
};
};
</script>
<form>
<table border="1" id = "user">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th> <input type="submit" name="age" value="age" onclick="allmodifyage(‘user‘)"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zy</td>
<td><input type="text" name="age" value="43"></td>
</tr>
<tr>
<td>2</td>
<td>junjun</td>
<td><input type="text" name="age" value="43"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
2、引发的问题：上面的代码能正确修改每行指定列的值，但发现一个问题，就是在修改后，立刻又变为默认值；
原因：经分析，这是由于onclik方法在调用成功后，会自动刷新页面，所以该列有变为原来的值；
解决方案：在调用成功后，return一个false，这样onclick收到的为false就会当调用这个函数失败，不会自动刷新页面；
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
//根据第一行的字段值，统一修改其他行中的值
function allmodifyage(id){
var inputs = document.getElementById(id).getElementsByTagName("input");
var modify_value = 0;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == "text" ){
var checkRow = inputs[i];
var tr = checkRow.parentNode.parentNode;
var tds = tr.cells;
if( i == 1){
//获取第一行中age的值，如果使用input这种方式的话，有可能第一行对应的i不是1，而是看上面有多少input元素，保险情况可以直接获取表的第一行的这一列的值
modify_value = tds[2].getElementsByTagName("input")[0].value;
}
//给其他行的这列的元素进行赋值
tds[2].getElementsByTagName("input")[0].value = modify_value;
}
};
return false;
};
</script>
<form>
<table border="1" id = "user">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th> <input type="submit" name="age" value="age" onclick="return allmodifyage(‘user‘)"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zy</td>
<td><input type="text" name="age" value="43"></td>
</tr>
<tr>
<td>2</td>
<td>junjun</td>
<td><input type="text" name="age" value="43"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
时间： 2024-08-24 00:49:20