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 に答える