正在检索HTML表格

Question

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