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

本文关键字：文本 函数 Javascript 输入 html 动态 | 更新日期: 2023-09-27 18:06:33

我正在生成如下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");
        }
    });

每行在最后一行有一个保存按钮。如果我点击"保存"按钮，相应的行输入文本值应该作为参数传递给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"answers"month3"的未定义值。

如何将输入文本值传递给javascript函数?

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

要动态地创建文本框，所以它们在创建时不可用，但在运行时可用，所以你必须像这样传递它们

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/

使用$('#txtCatchment')代替。请使用data.d[i]。集水区等等。因为#txtCatchment在loop

之后不是唯一的

用下面的代码修改最后一行保存函数

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、输出

希望这对你有帮助。谢谢!

相关文章：