javascript - 如何在asp中获取表行的n个数字输入类型的值？

Question

我尝试设置输入字段将是自定义的，因此如果客户需要，他可以添加输入字段 N 个数字，或者他可以根据需要删除它，添加输入字段已实现，但我无法获取值像 n 个数字这样的文本字段

<tr>
    <th>S.No</th>
    <th>Description of Items</th>
    <th>Quantity</th>
    <th></th>
</tr>

<tr>
    <td>
        /td>
    <td>

    </td>
    <td>

    </td>
    <td>
    </td>
</tr>
</table>
<div>
    <input type="button" onclick="AddRow('epcgCon')" value="ADD ROW" />
</div>
<div>
    <input type="button" onclick="Submit()" value="Submit" />
</div>

我的 JavaScript 是

var count = "1";

function AddRow(in_tbl_name) {

    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];

    // create row
    var row = document.createElement("TR");

    // create table cell 2
    var td1 = document.createElement("TD")
    var strHtml2 = "" + count;
    td1.innerHTML = strHtml2.replace(/!count!/g, count);

    // create table cell 3
    var td2 = document.createElement("TD")
    var strHtml3 = "<input type=\"text\" name=\"Descr\" />";
    td2.innerHTML = strHtml3.replace(/!count!/g, count);

    // create table cell 4
    var td3 = document.createElement("TD")
    var strHtml4 = "<input type=\"text\" name=\"Qty\"  />";
    td3.innerHTML = strHtml4.replace(/!count!/g, count);

    // create table cell 5
    var td4 = document.createElement("TD")
    var strHtml5 = "<input type=\"button\" value=\"Remove\" onClick=\"delRow()\"/>";
    td4.innerHTML = strHtml5.replace(/!count!/g, count);

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);

    // add to count variable
    count = parseInt(count) + 1;

    // append row to table
    tbody.appendChild(row);
}

function delRow() {

    var current = window.event.srcElement;

    //here we will delete the line
    while ((current = current.parentElement) && current.tagName != "TR");
        //Delete Row END
        current.parentElement.removeChild(current);
}

Submit()
{
    var desc = document.getElementByName('Descr');
    var qty = document.getElementByName('Qty');

    // I need help on this How to I get value from if n numbers and insert into DB
}

我期望从 ajax 和 webservice 方法调用 n 次数据库存储，但实际上我需要如何在数组中获取该值 n 次。

Answer 1

关注评论。当卡住时询问。我会帮你的!

在您的文件中包含 jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></script>

HTML 代码

<table>
    <thead>
        <tr>
            <th>S.No</th>
            <th>Description of Items</th>
            <th>Quantity</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

</table>
<div>
    <input type="button" class="add" value="ADD ROW" />
</div>
<div>
    <input type="button" class="submit" value="Submit" />
</div>

jQuery 代码

*<script>
    var count = "1";
    $('body').on('click', '.add', function() {
        //function will be called when an element with class .add is clicked
        let tr = "<tr>";
        let etr = "</tr>";
        let td = "<td>";
        let etd = "</td>";
        let qty = "<input type='text' name='qty[]' class='qty'>";
        let descr = "<input type='text' name='descr[]' class='descr'>";
        let remove = "<button type='button' class='remove'>Remove</button>";

        //    made these variables to create dynamic rows
        let str = [tr, td, count, etd, td, descr, etd, td, qty, etd, td, remove, etd, etr].join("");
        //    join("") merges the array and converts it into string.
        $('tbody').append(str);
        //appended that string str to tbody.
        count++;
        //increment count for S.no
    });

    $('body').on('click', '.remove', function() {
        //function will be called when an element with class .remove is clicked
        //simply selecting the element using this keyword
        //    then deleting its parent's parent i.e. Parent == <td> paren'ts parent == "<tr>"
        $(this).parent().parent().remove();
        //decrement count for S.no
        count--;
    });

    $('body').on('click', '.submit', function() {
        //function will be called when an element with class .submit is clicked
        let descr = [];
        let qty = [];
        $('.descr').each(function() {
            descr.push($(this).val());
            qty.push($(this).val());
        })
        let formData = {
            'desc': qty,
            'qty': qty,
        };
        console.log(formData);
        $.ajax({
            url: 'YOUR_SERVER_SIDE_FILE', //any php,python,node whatever you use,
            data: formData,
            type: 'POST', //method to submit values either post,get_html_translation_table
            success: function(response) {
                //if you want to do something after the data is submitted...else leave it blank.
            }
        })

    });
</script>*