javascript - 将 html 表中的输入文本动态传递给 Javascript 函数

Question

我正在生成如下所示的 html 表:

    var tablebody = "";

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "mCatchmentMapping.aspx/BindDatatable",
        data: "{}",
        dataType: "json",
        success: function (data) {
            var struct = "<div class='message_list'><div class='module_content'>";

            for (var i = 0; i < data.d.length; i++) {
                tablebody = tablebody + "<div class='message'><table id='tblhtml' width='100%'><tr><td width='25%'>" + data.d[i].Name + "</td>";
                tablebody = tablebody + "<td><input type='hidden' style='color: green;' id='txtCode' name='Code' size='5' type='number' value=" + data.d[i].Code + "></td>";
                tablebody = tablebody + "<td width='15%' class='nr' align='left' style='color:green'><input type='text'  class='nr' style='color: green;' id='txtCatchment' name='txtCatchment' size='5' type='number' value=" + data.d[i].Catchment + "></td>";
                tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth1' name='SalesMonth1' size='5' type='number' value=" + data.d[i].salesMonth1 + "></td>";
                tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth2' name='SalesMonth2' size='5' type='number' value=" + data.d[i].salesMonth2 + "></td>";
                tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='text' style='color: green;' id='txtSalesMonth3' name='SalesMonth3' size='5' type='number' value=" + data.d[i].salesMonth3 + "></td>";
                tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + "," + $('#txtCatchment').val() + "," + $('#txtSalesMonth1').val() + "," + $('#txtSalesMonth2').val() + "," + $('#txtSalesMonth3').val() + ")'; value='Save'/></td></tr></table></div>";
            }
            tablebody = tablebody + "</div></div>"
            tablebody = struct + tablebody;
            $("#tbDetails").append(tablebody);
        },
        error: function (result) {
            alert("Error");
        }
    });

每一行的最后一个 td 都有一个保存按钮。如果我单击“保存”按钮，则相应行的输入文本值应作为参数传递给 JavaScript 函数“saveData”。

这是我的 JavaScript 函数:

    function saveData(code, catchment, month1, month2, month3) {
    alert("storename :" + code);
    alert("catchment :" + catchment);
    alert("month1 :" + month1);
    alert("month2 :" + month2);
    alert("month3 :" + month3);
    }

当我单击“保存”时，我得到“catchment”、“month1”、“month2”和“month3”的未定义值。

如何将输入文本值传递给 JavaScript 函数？

Answer 1

您正在动态创建文本框，因此它们在创建时不可用，但在运行时可用，因此您必须像这样传递它们

tablebody = tablebody + "<td width='15%' align='left' style='color:green'><input type='submit' class='use-address' id='btnSave' name='Save' onclick='saveData( " + data.d[i].Code + ",$(\"#txtCatchment\").val(), $(\"#txtSalesMonth1\").val(),$(\"#txtSalesMonth2\").val(), $(\"#txtSalesMonth3\").val())'; value='Save'/></td></tr></table></div>";

这是类似的示例

https://jsfiddle.net/h553jzmb/