【前端基礎】統一修改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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。