0

我正在尝试使用按钮将变量 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>
4

2 回答 2

0

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

多行工作小提琴

更新的输入元素

<!-- 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;

        }
    }

});
于 2013-08-16T03:27:13.780 回答
0

是的，这样做的一种方法是：

table.append('<tr><td>'+
      fn+'</td><td>'+
      ln+'</td><td><button onClick="myFunc(\"' + fn + '\")">Add</button></td></tr>')
于 2013-08-16T02:10:54.230 回答