添加自动生成行元素的功能

Question

我正在尝试向每个动态生成的行元素 (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", @class = "form-control", 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", @class = "form-control", @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, 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", @class = "form-control", onblur = "getMat()" } })</td>'
            var td4 = '<td style="width:300px">@Html.EditorFor(model => model.MatTxt, new { htmlAttributes = new { style = "Width:300px", @class = "form-control", @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", @class = "form-control", @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>

Answer 1

如果您尝试为每个新行添加不同的id，这可能会有所帮助

how to save the data and the rows in a table with localStorage in html

在cmets的末尾是完整的代码

它在所有新行上设置不同的 id

  id: Date.now(),
  kodi: kodiValue,
  çmimi: çmimiValue,
  url: image
};

Answer 2

谢谢你的回答，
我想出了一个“肮脏”的解决方案：

    <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", @class = "form-control", onblur = "getMat(this)" } })</td>'
            var td4 = '<td style="width:300px">@Html.EditorFor(model => model.MatTxt, new { htmlAttributes = new { style = "Width:300px", @class = "form-control", @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", @class = "form-control", @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>