Question

我试图使用按钮将变量fn传递给函数myFunc。我是javascript的新手，无论如何要做到这一点。我正在使用一个表格，其中包含使用的名字和姓氏。响应应该是问候语。该表最终将包含更多行，并且是更大项目的一部分。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
    var fn = document.getElementById("first_name").value;
    var ln = document.getElementById("last_name").value;

    var table = $("#resulttable");

    table.append('<tr><th>First Name</th><th>Last Name</th><th>ADD</th></tr>');

    table.append('<tr><td>'+
        fn+'</td><td>'+
        ln+'</td><td><button onClick="myFunc(fn)">Add</button></td></tr>') 

 }

function myFunc(fname){
    var firstName= fname

document.getElementById("status").innerHTML = "Hello" + firstName;

}   
</script>
</head>
<body>
<h2>Example</h2>
Your First Name: <input id="first_name" name="first_name" type="text" /> 
<br /><br />
Your Last Name: <input id="last_name" name="last_name" type="text" />
<br /><br />
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">

<br /><br />
<div id="status"></div>
<br /><br />
<table border = "1" id="resulttable">
</body>
</html>

Answer 1

是的，有一种方法可以做到这一点：

table.append('<tr><td>'+
      fn+'</td><td>'+
      ln+'</td><td><button onClick="myFunc(\"' + fn + '\")">Add</button></td></tr>')

Answer 2

由于您的表最终会包含更多行，因此您可以使用模板方法：

Working Fiddle for multiple rows

更新输入元素

<!-- Note the APP.ajax_post change -->
<input name="myBtn" type="submit" value="Submit Data" onClick="APP.ajax_post();">

<强>脚本

$(document).load(function() {
    // Creates a global APP variable that encapsulates all of the logic
    window.APP = {

        // Setup a template for later use
        rowTemplate: $('<tr><td></td><td></td><td><button>Add</button></td></tr>'),

        ajax_post: function () {
            var fn = document.getElementById("first_name").value;
            var ln = document.getElementById("last_name").value;

            var table = $("#resulttable");

            // Don't add a header if it already exists
            if(table.find('th').length == 0) {
                table.append('<tr><th>First Name</th><th>Last Name</th><th>ADD</th></tr>');
            }

            // Clone the template
            var row = APP.rowTemplate.clone();

            row.find('td:eq(0)').text(fn);
            row.find('td:eq(1)').text(ln);
            row.find('button').on('click', function() {
                APP.myFunc(fn);
            });

            row.appendTo(table);
        },

        myFunc: function (fname) {
            var firstName = fname

            document.getElementById("status").innerHTML = "Hello" + firstName;

        }
    }

});

将html表中的javascript变量传递给javascript函数

2 个答案: