问题描述
我正在尝试向每个动态生成的行元素(MatNr)添加一个函数,以从我们的SAP系统中获取名称,可用的片段和单位。
例如:
输入号码= 464411
结果: 文章文字:“ BATTERIE LI-Ionen AKKUPACK 3. 7V 800mAh”
单位= ST
5件装
我可以添加新行,但是从逻辑上讲,该函数始终指向第一行,因为名称都相同。我需要函数“知道”它在哪一行,然后以某种方式用行号调用该函数,还是我需要动态生成名称,还是同时生成两者??
请帮助!
代码:
<div>
<table id="mattable">
<thead>
<tr>
<th>Menge</th>
<th>Einheit</th>
<th>Materialnummer</th>
<th>Material Text</th>
<th>Kommentar</th>
<th>Freibestand</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:100px">
@Html.EditorFor(model => model.Menge,new { htmlAttributes = new { style = "Width:80px",@class = "form-control" } })
</td>
<td style="width:70px">
@Html.EditorFor(model => model.Einheit,new { htmlAttributes = new { style = "Width:50px",@class = "form-control",@readonly = "true" } })
</td>
<td style="width:130px">
@Html.EditorFor(model => model.MatNr,new { htmlAttributes = new { style = "Width:110px",onblur = "getMat()" } })
</td>
<td style="width:300px">
@Html.EditorFor(model => model.MatTxt,new { htmlAttributes = new { style = "Width:300px",@class = "form-control"} })
</td>
<td style="width:220px">
@Html.EditorFor(model => model.Comment,new { htmlAttributes = new { style = "Width:200px",@class = "form-control" } })
</td>
<td style="width:100px">
@Html.EditorFor(model => model.Freibestand,new { htmlAttributes = new { style = "Width:90px",@readonly = "true" } })
</td>
<td> <input class="btnAdd btn btn-default" type="button" name="name" value="+" onclick="addrow()" /></td>
</tr>
</tbody>
</table>
<br />
<script type="text/jscript">
function addrow() {
var tbodyRowCount = "MatNr"+mattable.tBodies[0].rows.length+1;
var td1 = '<td style="width:100px">@Html.EditorFor(model => model.Menge,@class = "form-control" } })</td>';
var td2 = '<td style="width:70px">@Html.EditorFor(model => model.Einheit,@readonly = "true" } })</td>';
var td3 = '<td style="width:130px">@Html.EditorFor(model => model.MatNr,onblur = "getMat()" } })</td>'
var td4 = '<td style="width:300px">@Html.EditorFor(model => model.MatTxt,@readonly = "true" } })</td>';
var td5 = '<td style="width:220px">@Html.EditorFor(model => model.Comment,@class = "form-control" } })</td>';
var td6 = '<td style="width:100px">@Html.EditorFor(model => model.Freibestand,@readonly = "true" } })</td>';
var td7 = '<td> <input class="btnAdd btn btn-default" type="button" name="name" value="+" onclick="addrow()" /></td>'
$("#mattable > tbody").append('<tr>' + td1 + td2 + td3 + td4 + td5 + td6 + td7 + '</tr>');
}
function getMat() {
var text = $('#MatNr').val();
var url = "/Apps/GetMatInfos";
$.get(url,{ MatNr: text },function (data) {
$("#MatTxt").val(data[0]);
$("#Freibestand").val(data[1]);
$("#Einheit").val(data[2]);
})
}
</script>
</div>
解决方法
如果您尝试为每个新行添加不同的id
,则可能会有帮助
how to save the data and the rows in a table with localStorage in html
注释的最后是完整的代码
它在所有新行上都设置了不同的ID
id: Date.now(),kodi: kodiValue,çmimi: çmimiValue,url: image
};
,
感谢回答,
我想出了一个“肮脏”的解决方案:
<script type="text/jscript" runat="server">
function addrow() {
var tbodyRowCount = "MatNr"+mattable.tBodies[0].rows.length+1;
var td1 = '<td style="width:100px">@Html.EditorFor(model => model.Menge,new { htmlAttributes = new { style = "Width:80px",@class = "form-control" } })</td>';
var td2 = '<td style="width:70px">@Html.EditorFor(model => model.Einheit,new { htmlAttributes = new { style = "Width:50px",@class = "form-control",@readonly = "true" } })</td>';
var td3 = '<td style="width:130px">@Html.EditorFor(model => model.MatNr,new { htmlAttributes = new { style = "Width:110px",onblur = "getMat(this)" } })</td>'
var td4 = '<td style="width:300px">@Html.EditorFor(model => model.MatTxt,new { htmlAttributes = new { style = "Width:300px",@readonly = "true" } })</td>';
var td5 = '<td style="width:220px">@Html.EditorFor(model => model.Comment,new { htmlAttributes = new { style = "Width:200px",@class = "form-control" } })</td>';
var td6 = '<td style="width:100px">@Html.EditorFor(model => model.Freibestand,new { htmlAttributes = new { style = "Width:90px",@readonly = "true" } })</td>';
var td7 = '<td> <input class="btnAdd btn btn-default" type="button" name="name" value="+" onclick="addrow()" /></td>'
$("#mattable > tbody").append('<tr>' + td1 + td2 + td3 + td4 + td5 + td6 + td7 + '</tr>');
}
function getMat(element) {
var text = $(element).val().trim();
var url = "/Apps/GetMatInfos";
$.get(url,{ MatNr: text },function (data) {
var row = element.parentNode.parentNode.rowIndex;
var x = document.getElementById('mattable').rows[parseInt(row,10)].cells;
//MatTxt
var cel = element.parentNode.cellIndex + 1
var td4 = '<td style="width:300px"><input name="MatTxt" class="form-control text-box single-line" id="MatTxt" style="width: 300px;" type="text" readonly="true" value="' + data[0] +'"></td>';
x[parseInt(cel,10)].innerHTML = td4;
//Freibestand
cel = element.parentNode.cellIndex + 3
var td6 = '<td style="width:100px"><input name="Freibestand" class="form-control text-box single-line" id="Freibestand" style="width: 90px;" type="text" readonly="true" value="' + data[1] + '"></td>';
if (data[1] == 0) { td6 = '<td style="width:100px"><input name="Freibestand" class="form-control text-box single-line" id="Freibestand" style="width: 90px;background-color: OrangeRed;" type="text" readonly="true" value="' + data[1] + '"></td>'; }
x[parseInt(cel,10)].innerHTML = td6;
//Einheit
cel = element.parentNode.cellIndex - 1
var td7 = '<td style="width:70px"><input name="Einheit" class="form-control text-box single-line" id="Einheit" style="width: 50px;" type="text" readonly="true" value="' + data[2] + '"></td>';
x[parseInt(cel,10)].innerHTML = td7;
})
}
</script>