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都有一个保存按钮。如果我点击＆＃34;保存＆＃34;按钮，相应的行输入文本值应作为参数传递给JavaScript函数＆＃34; saveData＆＃34;。

这是我的javascript函数：

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

当我点击保存时，我得到未定义的值＆＃34;流水＆＃34;，＆＃34; month1＆＃34;，＆＃34; month2＆＃34;和＆＃34; month3＆＃34;。

如何将输入文本值传递给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/

Answer 2

而是使用$（'＃txtCatchment'）。val使用data.d [i] .Catchment等。因为#txtCatchment在循环后不会是唯一的

使用以下代码修改保存功能的最后一行。

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 + "," + data.d[i].Catchment + "," + data.d[i].salesMonth1 + "," + data.d[i].salesMonth2 + "," + data.d[i].salesMonth3 + ")'; value='Save'/></td></tr></table></div>";

工作实例 https://jsbin.com/jayaki/edit?html,js,output

希望这会有所帮助。谢谢！

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

2 个答案: