带有可在javascript中访问的可编辑字段的HTML表格。

时间:2017-03-23 19:58:35

标签: javascript html

我正在尝试构建一个允许用户更改单元格值的表格,然后提交"提交"那个数据 到一个JavaScript(only please)方法,将表数据转换为json数据集。

我首先尝试更新一个字段的值。在这种情况下的数量。我能够遍历表并获取静态值,但我无法捕获用户输入值。

问题:什么是仅限JavaScript(如果可能)从表中捕获用户更改(能够)值的方法?



function updateQTY() {

  //getData from table
  //gets table
  var lines = "";
  var oTable = document.getElementById('items');

  //gets rows of table
  var rowLength = oTable.rows.length;
  var line = "";
  //loops through rows, skips firts row/header
  for (i = 1; i < rowLength; i++) {

    //gets cells of current row
    var oCells = oTable.rows.item(i).cells;
    var qty = oCells.item(2).innerHTML;
    //alert("qty: " + wty);
    qty = qty.substr(oCells.item(2).innerHTML.indexOf('value=') + 7);
    qty = qty.substr(0, qty.indexOf('" class='));
    //alert(qty);
    line = line +
      '{ "item": "' + oCells.item(0).innerHTML + '",' +
      ' "discription": "' + oCells.item(1).innerHTML + '",' +
      ' "qty": "' + qty + '"},'

  }
  //alert(line);
  var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
  alert("lines: " + JSON.stringify(jsonData));
}
&#13;
<form action='#'>
  <table class='mdl-data-table mdl-js-data-table' id='items'>
    <thead>
      <tr>
        <th>item</th>
        <th>discription</th>
        <th>QTY</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_1 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty1' id='value1' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_2 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's super fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty2' id='value2' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type='button' value='update' onclick='updateQTY()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
  </div>
</form>
&#13;
&#13;
&#13;

谢谢你

3 个答案:

答案 0 :(得分:2)

不是选择整个td元素,而是使用querySelector仅检索您真正需要的内容(如果可能,请使用jQuery)。找到输入元素并访问该值,它比对整个单元格的内部html进行所有必要的解析要容易得多。

&#13;
&#13;
[HttpGet]
public HttpResponseMessage GetVersionList(string Credentials, string VersionNumber)
{
  try
  {
      string UserLoginStatus = objUtility.LoginUser(objUtility.GetUserName(Credentials), objUtility.GetPassWord(Credentials));

      if (UserLoginStatus == "OK")
      {
          var path = objUtility.GetFileName(VersionNumber);

          if (path != null)
          {
              return FileAsAttachment(path, VersionNumber + ".exe");
          }
          else
          {               
              return Request.CreateErrorResponse(HttpStatusCode.OK, "File Not Found.");
          }
      }
      else
      {
          // Return reason why it failed.
          // It could be not authorized user, Not Active user, UID/Password wrong etc. 
          // Store into UserLoginStatus variable and pass show to client
          return Request.CreateResponse<string>(HttpStatusCode.OK, UserLoginStatus);
      }
  }
  catch (System.Exception ex)
  {
      return Request.CreateResponse<string>(HttpStatusCode.OK, ex.Message);
  }

}

// Win app code to download file 
using (WebClient webClient = new WebClient())
{  
            try
            {
                webClient.DownloadFile(serverUrl, (txtPath.Text + "\\" + txtVersion.Text + ".exe"));
            }
            catch (WebException wex)
            {
                // Show error message here 
            }
        }
    }
    catch (Exception ex)
    {
        lblStatus.Text = ex.InnerException + " <br> " + ex.Message;
    }
}
&#13;
function updateQTY() {

  //getData from table
  //gets table
  var lines = "";
  var oTable = document.getElementById('items');

  //gets rows of table
  var rowLength = oTable.rows.length;
  var line = "";
  //loops through rows, skips firts row/header
  for (i = 1; i < rowLength; i++) {

    //gets cells of current row
    var oCells = oTable.rows.item(i).cells;
    var qty = oCells.item(2).querySelector(".mdl-textfield__input").value;
    line = line +
      '{ "item": "' + oCells.item(0).innerHTML + '",' +
      ' "discription": "' + oCells.item(1).innerHTML + '",' +
      ' "qty": "' + qty + '"},'

  }
  //alert(line);
  var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
  alert("lines: " + JSON.stringify(jsonData));
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您需要使用document.getElementById('value2').value代替.innerHTML.indexOf('value=')

答案 2 :(得分:0)

你在这里做了很多工作。你有一张桌子。您需要做的就是将其转换为JSON。我建议你看一下下面的库,它在大约一行原生java脚本中做到了。

http://www.developerdan.com/table-to-json/