js獲取table的值，js獲取td裏input的值

一、若是想讓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>

二、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)); });

三、後臺如何得到前端傳過來的值

使用flask的json.load方法，能夠把前端傳過來的字符串變爲python的list

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

 

四、jquery方式

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

 

 

參考：

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

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