为什么我的javascript函数在循环遍历表时会获取输入文本?

时间:2016-05-13 11:50:13

标签: javascript jquery html

我的函数将成功加载下拉列值,但无法加载任何输入文本值。我只是得到一个显示空白输入框的输出,因此它没有选择它是什么类型的输入。



$(document).ready(function () {
  $('#clicker').on('click', function (e) {
    var tableToObj = function (table) {
      var trs = table.rows, //replacing , with ; at end of each line
          trl = trs.length,
          i = 0,
          j = 0,
          keys = [],
          obj, ret = [];
      for (; i < trl; i++) {
        if (i === 0) {
          // var sel = $(trs[i].children[j]).find('select');
          //changed from input

          for (; j < trs[i].children.length; j++) { //removed ; from (;
            var sel = $(trs[i].children[j]).find('select'); //same as below 
            if (sel.length === 0) {
              keys.push(trs[i].children[j].innerHTML);
            } else {
              keys.push(sel.find('option:selected').val());
            }

            var input = trs[i].children[j].value;

          }

        } else {
          obj = {};
          for (j = 0; j < trs[i].children.length; j++) { //this works j = 0;
            var sel = $(trs[i].children[j]).find('select'); //replaced " with ' around select
            if (sel.length === 0) {
              obj[keys[j]] = trs[i].children[j].innerHTML;
            } else {
              obj[keys[j]] = sel.find('option:selected').val();
            }
            var input = trs[i].children[j].value;

          }
          ret.push(obj);
        }

      }
      return ret;
    };

    document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable')));
  });
});  
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>FirstColumn</th>
      <th>SecondColumn</th>
      <th>ThirdColumn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> 
        <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
      <td>1</td>
      <td> 
        <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td> 
        <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td>
        <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
    </tr>
    <tr>
      <td>
        <input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td> 
        <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
    </tr>
  </tbody>
</table>​​<input type="button" id="clicker" value="Click Me"/>
<br/> Result: 
<fieldset id="r"> 
</fieldset>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false" unselectable="on">
  <div class="ms-rtestate-notify  ms-rtestate-read 9622406d-82bb-4b09-8e13-8fb81e9da538" id="div_9622406d-82bb-4b09-8e13-8fb81e9da538" unselectable="on">
  </div>
  <div id="vid_9622406d-82bb-4b09-8e13-8fb81e9da538" unselectable="on" style="display: none;">
  </div>
</div>​<br/>
&#13;
&#13;
&#13;

我目前的OBJ输出是:

 [{"FirstColumn":"tr1","SecondColumn":"1","ThirdColumn":"tr1"},{"FirstColumn":"1","SecondColumn":"2","ThirdColumn":"tr1"},{"FirstColumn":"","SecondColumn":"","ThirdColumn":"tr1"},{"FirstColumn":"\n  ","SecondColumn":"","ThirdColumn":""},{"FirstColumn":"","SecondColumn":"","ThirdColumn":"tr1"}]

0 个答案:

没有答案