检索 HTML 表值答案

【问题标题】：Retrieving HTML Table Values检索 HTML 表值
【发布时间】：2017-07-05 01:32:50
【问题描述】：

我创建了一个表并从http://www.fourfront.us/blog/store-html-table-data-to-javascript-array 借用了一个javascript 函数来以我想要的方式检索表的内容。它几乎可以工作，但由于某种原因，我无法访问用户输入的值。我在http://jsfiddle.net/danielmdavies/4mu80x2L/1/ 做了一个 JS 小提琴代码也贴在下面。如果我使用 "time_cutoff": $(tr).find('td:eq(2)').html() 而不是 "time_cutoff": $(tr).find('td:eq(2)').val(), 我会得到正确的 html 代码。

这是相关的html代码：

<table id="cycler_table">
    <tr>
        <th>Cycle Step</th>
        <th>Mode</th>
        <th>Time Cutoff</th>
        <th>Voltage Cutoff</th>
        <th>Current Cuttoff</th>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <select name='cyc_mode1'>
                <option value='galvanostatic'>Galvanostatic</option>
                <option value='Potentiostatic'>Potentiostatic</option>
                <option name='rest'>Rest</option>
        </td>
        <td>
            <input type='text' name='time_cutoff1' value='10'>
        </td>
        <td>
            <input type='text' name='voltage_cutoff1' value='0'>
        </td>
        <td>
            <input type='text' name='current_cutoff1' value='0'>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>
            <select name='cyc_mode2'>
                <option value='galvanostatic'>Galvanostatic</option>
                <option value='Potentiostatic'>Potentiostatic</option>
                <option name='rest'>Rest</option>
        </td>
        <td>
            <input type='text' name='time_cutoff2' value='10'>
        </td>
        <td>
            <input type='text' name='voltage_cutoff2' value='0'>
        </td>
        <td>
            <input type='text' name='current_cutoff2' value='0'>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <select name='cyc_mode3'>
                <option value='galvanostatic'>Galvanostatic</option>
                <option value='Potentiostatic'>Potentiostatic</option>
                <option name='rest'>Rest</option>
        </td>
        <td>
            <input type='text' name='time_cutoff3' value='10'>
        </td>
        <td>
            <input type='text' name='voltage_cutoff3' value='0'>
        </td>
        <td>
            <input type='text' name='current_cutoff3' value='0'>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>
            <select name='cyc_mode4'>
                <option value='galvanostatic'>Galvanostatic</option>
                <option value='Potentiostatic'>Potentiostatic</option>
                <option name='rest'>Rest</option>
        </td>
        <td>
            <input type='text' name='time_cutoff4' value='10'>
        </td>
        <td>
            <input type='text' name='voltage_cutoff4' value='0'>
        </td>
        <td>
            <input type='text' name='current_cutoff4' value='0'>
        </td>
    </tr>
</table>
<textarea id="tbTableValuesArray" name="tblValuesArray" rows="10"></textarea>
</div>
<p id="cyc_confirm">Waiting for Properties to be Confirmed
    <button onclick="storeAndShowTableValues()">Send the Setup</button>

还有 Javascript

$(document).ready(function () {
    console.log("ready!");
    storeAndShowTableValues();
});


function storeAndShowTableValues() {
    var TableData;
    TableData = storeTblValues();
    $('#tbTableValuesArray').val('TableData = \n' + print_r(TableData));
}

function storeTblValues() {
    var TableData = new Array();

    $('#cycler_table tr').each(function (row, tr) {
        TableData[row] = {
            "cyc_mode": $(tr).find('td').eq(1).val(),
            "time_cutoff": $(tr).find('td:eq(2)').val(),
            "voltage_cutoff": $(tr).find('td:eq(3)').val(),
            "current_cutoff": $(tr).find('td:eq(4)').val()
        }
    });
    TableData.shift(); // first row will be empty - so remove
    return TableData;
}

function convertArrayToJSON() {
    var TableData;
    TableData = $.toJSON(storeTblValues());
    $('#tbConvertToJSON').val('JSON array: \n\n' + TableData.replace(/},/g, "},\n"));


}

function print_r(arr, level) {
    var dumped_text = "";
    if (!level) level = 0;

    //The padding given at the beginning of the line.
    var level_padding = "";
    for (var j = 0; j < level + 1; j++) level_padding += "    ";

    if (typeof (arr) == 'object') { //Array/Hashes/Objects 
        for (var item in arr) {
            var value = arr[item];

            if (typeof (value) == 'object') { //If it is an array,
                dumped_text += level_padding + "'" + item + "' \n";
                dumped_text += print_r(value, level + 1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { //Stings/Chars/Numbers etc.
        dumped_text = "===>" + arr + "<===(" + typeof (arr) + ")";
    }
    return dumped_text;
}

这可能非常简单，但无论出于何种原因，我都不知道如何让它给我价值。任何帮助都会很棒。

【问题讨论】：

您的问题是您正在寻找td 并试图从中获取.val，而不是在td 中获取input（或select）。
@MattBurland 是对的，这是更新的小提琴jsfiddle.net/4mu80x2L/3
@MattBurland 非常感谢。我会赞成评论和回答，但我没有声誉:(
@DanGoodspeed，谢谢。
另请注意，对于名为 storeAndShowTableValues 的函数，它实际上只是丢弃了 TableData 的值，因为它的范围仅限于该函数。

标签： javascript html input html-table

【解决方案1】：

尝试这样的方法来获取值：

TableData[row] = {
    "cyc_mode": $(tr).find('select').val(),
    "time_cutoff": $(tr).find('input:eq(0)').val(),
    "voltage_cutoff": $(tr).find('input:eq(1)').val(),
    "current_cutoff": $(tr).find('input:eq(2)').val()
};

您需要找到实际的input 和select 元素来获取它们的值。

或者更好：

var elem = $(tr);
TableData[row] = {
    "cyc_mode": elem.find('select').val(),
    "time_cutoff": elem.find('input:eq(0)').val(),
    "voltage_cutoff": elem.find('input:eq(1)').val(),
    "current_cutoff": elem.find('input:eq(2)').val()
};

这避免了四次重新创建 jquery 对象。

【讨论】：