Извлечение значений таблицы HTML

Question

Я создал таблицу и заимствовал функцию javascript от http://www.fourfront.us/blog/store-html-table-data-to-javascript-array, чтобы получить содержимое таблицы так, как я хотел. Он почти работает, но по какой-то причине я не могу получить доступ к значению, которое вводит пользователь. Я сделал скрипку 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 четыре раза.