我正在尝试构建一个允许用户更改单元格值的表格,然后提交"提交"那个数据 到一个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;
谢谢你
答案 0 :(得分:2)
不是选择整个td元素,而是使用querySelector仅检索您真正需要的内容(如果可能,请使用jQuery)。找到输入元素并访问该值,它比对整个单元格的内部html进行所有必要的解析要容易得多。
[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;
答案 1 :(得分:1)
您需要使用document.getElementById('value2').value
代替.innerHTML.indexOf('value=')
答案 2 :(得分:0)
你在这里做了很多工作。你有一张桌子。您需要做的就是将其转换为JSON。我建议你看一下下面的库,它在大约一行原生java脚本中做到了。