解析表jQuery提供初始值而不是当前值

时间:2016-03-27 16:28:03

标签: jquery json

我有一个非常简单的表结构

<table id="mytable">
<tr>
  <th>Content</th>
  <th>Options</th>
</tr>
<tr>
  <td class="content"><input type="text" value="my initial value"></td>
  <td class="option">
  <select>
    <option value="value1" >Value#1</option>
    <option value="value2" >Value#2</option>
    <option value="value3" >Value#3</option>
    </select>
  </td>
</tr>
...
</table>
<input type="button" onclick="javascript:doIt()" value="do it";>

我解析为了在提交时使用chgContentToValue创建一个JSON,将其中一个值写入输入字段。

function doIt() {
  var i = 0;
  var json = {};
  $("#mytable tr").each(function () {
    var content = $(this).find(".content").html();
    var option = $(this).find(".option").html();

    if (content != undefined) {
      content = $(content).val();
      option = $(option).val();

      var line = {};
      line['content'] = content;
      line['option'] = option;
      json[i] = line;
      i++;
    }
  });
  json = JSON.stringify(json);
  alert(json);
}

执行:

  • 打开HTML
  • 更改输入字段的值和/或选择中的其他值
  • 点击按钮

我总是以最初的值结束,而不是用户已经更改/键入的值。 请说明我的错误是什么,我如何获取输入字段的最新值&amp;选择。非常感谢!

2 个答案:

答案 0 :(得分:0)

当您需要html()

时,您在表单控件元素上使用value做了奇怪的事情

尝试

$("#mytable tr").each(function (i) {
  // get value not html
  var content = $(this).find(".content").val();
  var option = $(this).find(".option").val();

  if (content ) {    
    var line = {
       content: content,
       option : option
     };    
    json[i] = line;
    // i++; not needed because index is already available in `each`
  }
});
json = JSON.stringify(json);

答案 1 :(得分:0)

获取html将始终返回元素,因为它是渲染而不是现在。试试这个。

$("#mytable tr").each(function () {
var content = $(this).find(".content input");
var option = $(this).find(".option select");

if (content.length > 0) {
  content = content.val();
  option = option.val();

  var line = {};
  line['content'] = content;
  line['option'] = option;
  json[i] = line;
  i++;
}
});