zoukankan      html  css  js  c++  java
  • js获取table的值,js获取td里input的值

    1、如果想让table具有可以编辑的功能,可以在table里嵌入input标签

    写法{{ list_one[1] or '' }}的作用是,当list_one[1]取值为None时,前端web界面不至于显示None,而是显示为空
    <table class="table table-bordered" id="parameters">
           <tr>
                <th style=" 5px">变量名称</th>
                <th>变量值</th>
           </tr>
            {% for list_one in info_list[8] %}
           <tr>
                 <td>{{ list_one[0] }}</td>
                 <td><input class="form-control" placeholder="必填" value="{{ list_one[1] or '' }}"></td>    
           </tr>
           {% endfor %}
    </table>

    2、js如何获取这些值,并把他们传给flask后台呢?

    下列方法可以获得table的各行各列的值。

    JSON.stringify(parameters)把参数json话

    $("#save_script").click(function () {
            var parameters = new Array();
            rows = document.getElementById("dubbo_parameters").rows;
            for(var row=1;row<rows.length;row++){
                parameters[row-1] = new Array();
                for(var col=0;col<rows[row].cells.length;col++){
                    if(col%2 == 0){
                        parameters[row-1][col] = rows[row].cells[col].innerHTML;
                    }else {
                        parameters[row-1][col] = rows[row].cells[col].childNodes[0].value;  获取td里input的value值
                    }
                }
            }
            $("#dubbo_para").val(JSON.stringify(parameters));
           
     });

    3、后台如何获得前端传过来的值

    使用flask的json.load方法,可以把前端传过来的字符串变为python的list

    dubbo_para = json.loads(request.form.get("dubbo_para"))

    4、jquery方式

    <table>
       <tr>
            <td><input type="text" value="外出"></td>
       </tr>
    </table>
    
    jquery:
    
    $("table tr").children("td:eq(0)").find("input").val();    

    参考:

    1、https://segmentfault.com/a/1190000007605055

    2、https://blog.csdn.net/xuliangwen/article/details/6932064




  • 相关阅读:
    vs报错“以下文件中的行尾不一致,是否将行尾标准化”
    redis配置
    C#中保留两位小数但不四舍五入的最优做法
    jMeter 监控cpu、内存
    project 2010 使用技巧
    JMeter2.13 连接 sql server
    JMeter2.13进行压力测试
    freefilesync 7 使用
    cmd中无法运行svn命令
    MongoDB 3 + Windows 7 X64安装及配置
  • 原文地址:https://www.cnblogs.com/shengulong/p/8919747.html
Copyright © 2011-2022 走看看