【前端基础】统一修改table中某一列的值

时间 2019-11-08

标签前端基础统一修改 table 某一繁體版

原文原文链接

1、需求javascript

需求比较简单，就是先修改第一列中age下面的input中的值，而后点击age这个submit按钮，会将这一列中全部的值都修改称第一列中age对应的值，如上图所示；html

2、实现java

一、针对这个需求，我第一反应就是先获取第一列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>

二、引起的问题：上面的代码能正确修改每行指定列的值，但发现一个问题，就是在修改后，马上又变为默认值；spa

　　缘由：经分析，这是因为onclik方法在调用成功后，会自动刷新页面，因此该列有变为原来的值；code

　　解决方案：在调用成功后，return一个false，这样onclick收到的为false就会当调用这个函数失败，不会自动刷新页面；orm

<!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>