jquery - table cell input returns as undefined -
i using jquery 2 need populate multidimensional array values in table
here code (first column hidden)
html:
<table id="datatab" border="1"> <tbody> <tr role="row" class="odd"> <td class="sorting_1" style="display: none;">2087971</td> <td>1</td> <td>1</td> <td>aaaa</td> <td>john smith</td> <td><input type="text" name="value1" value="1"></td> <td><input type="text" name="value2" value="2"></td> <td><input type="text" name="value3" value="3"></td> <td></td> </tr> <tr role="row" class="even"> <td class="sorting_1" style="display: none;">2087972</td> <td>2</td> <td>2</td> <td>bbbb</td> <td>peter parker</td> <td><input type="text" name="value1" value="4"></td> <td><input type="text" name="value2" value="4"></td> <td><input type="text" name="value3" value="4"></td> <td></td> </tr> </tbody> </table> <button id="getdata">get data</button> jquery:
<script type="text/javascript"> $("#getdata").click(function (event) { debugger; event.preventdefault(); var tabledata = new array(); $('#datatab tbody tr').each(function (row, tr) { tabledata[row] = { "id": $(tr).find('td:eq(0)').text() , "value1": $(tr).find('td:eq(5)').find("input").value , "value2": $(tr).find('td:eq(6)').find("input").value , "value3": $(tr).find('td:eq(7)').find("input").value } }); }); </script> i populate first id column in array line
$(tr).find('td:eq(0)').text() however values of inputs undefined
what doing wrong?
you need use val() method of jquery objects, not have value property underlying domelements. note can use map() build array. try this:
$("#getdata").click(function(e) { e.preventdefault(); var tabledata = $('#datatab tbody tr').map(function(row, tr) { var $row = $(tr); return { id: $row.find('td:eq(0)').text(), value1: $row.find('td:eq(5) input').val(), value2: $row.find('td:eq(6) input').val(), value3: $row.find('td:eq(7) input').val() } }).get(); // work tabledata here... });
Comments
Post a Comment