zoukankan      html  css  js  c++  java
  • 【前端基础】统一修改table中某一列的值

    一、需求

    需求比较简单,就是先修改第一列中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>
  • 相关阅读:
    day05
    day04
    day03
    day02
    一个球从100m高度自由下落,每次落地后反跳回原高度的一半,再落下,再反弹。求它在第10次落地时,共经过多少米,第10次反弹多高
    有一个分数序列:2/1,3/2,5/3,8/5,13/8,21/13,... 求出这个数列的前20项之和
    输出所有的"水仙花数",所谓"水仙花数"是指一个3位数,其各位数字立方和等于该数本身。例如,153是一个水仙花数,因为153=1^3+5^3+3^3
    求和k(1到100)+k*k(1到50)+1/k(1到10)
    求Sn=a+aa+aaa+...+aa..a(n个a)之值,其中a是一个数字,n表示a的位数,例如:2+22+222+2222+22222(n=5),n由键盘输入
    求1!+2!+3!+4!+...+20!
  • 原文地址:https://www.cnblogs.com/rolly-yan/p/6920883.html
Copyright © 2011-2022 走看看