javascript - 检索 HTML 表值

Question

我创建了一个表并从http://www.fourfront.us/blog/store-html-table-data-to-javascript-array借用了一个javascript函数以我想要的方式检索表的内容。它几乎可以工作，但由于某种原因我无法访问用户输入的值。 我在 http://jsfiddle.net/danielmdavies/4mu80x2L/1/ 做了一个 JS fiddle 代码也贴在下面。如果我使用 "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;
}

这可能非常简单，但出于某种原因，我无法弄清楚如何让它为我提供值。 任何帮助都会很棒。

Answer 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 对象四次。