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="width: 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



原文地址:https://www.cnblogs.com/shengulong/p/8919747.html

时间: 2024-08-08 12:38:25

js获取table的值,js获取td里input的值的相关文章

js获取table checkbox选中行的值.mdjs获取table checkbox选中行的

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> function check() {         var check = $("input[type='checkbox']:checked");//在tab

HTML JS获取到table中所有的input的值 传递到前端

1.获取table对象 2.行循环.列循环然后遍历每一个格子里面的input值 3.用连接符连接 4.放置到form的隐藏域里面. 5.传递到后台. js代码:注意:1.input必须跟[0]否则无法取出值  2.在JS的双引号里面不能在用""改成''而且{}在引号里也会被识别报错.将字符串传回后台处理即可 function GetInfoFromTable() { var tableInfo = ""; var tableObj = document.getEle

js 获取select的值 / js动态给select赋值

jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select

【JavaScript】table里面点击某td获取同一行tr的其他td值

某td的input(保存按钮)上绑定方法,点击按钮保存该行所有数据 function locationedit(num){ var ordernumber = $("#"+num).parent().parent().find("td").eq(1).text(); var itemnumber = $("#"+num).parent().parent().find("td").eq(4).text(); var locati

【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redirect(Request.UrlReferrer.ToString());} else { //没有来路地址 Response.Redirect("index.aspx"); 二.Js获取table中的行数与列数 var table =document.getElementById(&qu

使用JS获取HTML文档中的&lt;a&gt;标签的href值。

因为经常用到某个网站中的二维码信息,每次都需要手动打开网站,滑到对应的地方,点击一个链接才能打开图片,因此想着用一个脚本去获取这个信息.正好js可以很方便的操作HTML的DOM,所以写了一个简单的函数来试试手. 打开网页,打开浏览器的调试工具,获取对应的页面信息,发现其所在的节点后可以使用如下函数来获取href的值. js = document.getElementsByClassName("hover-text")[4].getElementsByTagName('a')[0].ge

web开发学习笔记(4):js获取table的行数和表格中某一行某一列的内容

table的id="tab" 一.获取table的行数 var count=document.getElementById("tab").rows.length; 二.获取第i行第j列的内容(方式不止三种,根据实际情况选择,比较推荐方式一) 方式一: <pre name="code" class="html"><strong>var title=tab.rows[i].cells[j].children

js修改table中Td的值(定义td的单击事件)

/* 页面装载时,为每个td增加单击事件,这样,就可以不用对每个页面进行更改. 添加单击事件属性.此处不可使用setAttribute方法. */ onclick=AddObjOfText; 单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值, 一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容. 一个Hidden,保存用户输入新值前的Td的值,以便用户取消时恢复. */ function AddObjOfText() { var tdcag=docum

table新增一行并循环获取table内值

简单介绍 table新增一行,并获取table标签中所有td的值,通过js将其组装成json格式传给后端存储数据库. 实际操作 1.首先需要在页面html创建talbe标签内容,定义th标题 2.给包含td的tr增加一个属性,例如:type="subdata" 3.在table标签下增加一个按钮,并给其增加一个click事件 html内容 4.在js文件中进行click事件内容的编写,按照th标题数量进行td的拼接,也增加了一个删除行功能 js内容 5.js使用each来进行table