zoukankan      html  css  js  c++  java
  • 原生js循环获取表格中input的值

            <table>
                    <tbody class="tbody" id="pileListItemDesc">
                        <tr class="text-center lastTr">
                            <td class="index">4</td>
                            <td class="depth"><input type="text" name="depth" class="input-none input-disabled" value="1.2"
                                    disabled=""></td>
                            <td class="hammerValue"><input type="text" name="hammerValue" class="input-zt" value="18"></td>
                            <td class="correctValue">
                                <input type="text" name="correctValue" class="input-zt" ignore="ignore" value="">
                            </td>
                            <td class="description"><input type="text" name="description" class="input-zt" value="-"></td>
                            <td class="remark"><input type="text" name="remark" class="input-zt" value="-"></td>
                            <td></td>
                        </tr>
                        <tr class="text-center">
                            <td class="index">3</td>
                            <td class="depth"><input type="text" name="depth" class="input-none input-disabled" value="0.9"
                                    disabled=""></td>
                            <td class="hammerValue"><input type="text" name="hammerValue" class="input-zt" value="14"></td>
                            <td class="correctValue">
                                <input type="text" name="correctValue" class="input-zt" ignore="ignore" value="">
                            </td>
                            <td class="description"><input type="text" name="description" class="input-zt" value="-"></td>
                            <td class="remark"><input type="text" name="remark" class="input-zt" value="-"></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

    css代码清单:

     var tbody = document.getElementById("pileListItemDesc");
        var rows = tbody.rows; //获取行
        var depthList = [];
        for (var i = 0; i < rows.length; i++) {
            var obj = {};
            var cells = rows[i].cells; //获取列
            for (var j = 0; j < cells.length; j++) {
                var input = cells[j].getElementsByTagName("input");
                if (input.length == 0) {
                    if (cells[j].getAttribute('class') === 'index') {//获取index的值
                        obj["index"] = cells[j].innerText
                    }
                } else {
                    var val = input[0].value;
                    var name = input[0].name;
                    obj[name] = val;
                }
            }
            depthList.push(obj);
        }
        console.log(depthList)
  • 相关阅读:
    ServletContext笔记
    Session笔记
    Cookie笔记
    递归实现取数组最大值
    栈结构实现队列结构
    返回栈中最小元素的两种实现O(1)
    数组实现不超过固定大小的队列(环形数组)
    双向链表实现栈和队列
    Windows Server 2008 R2 / Windows Server 2012 R2 安装 .NET Core 3.1
    Windows 7 / Windows Server 2008 R2 升级至 SP1
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/12611681.html
Copyright © 2011-2022 走看看