Question

我有两个表单条目。一个是您放置姓名的地方，另一个是您可以发布博客的地方。我希望这两个条目通过JQuery和JSON在表格中发布。我不知道我哪里出错了和/或我错过了什么。有人可以帮忙吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Blog Demo</title>
        <style>
            .control {
                margin-bottom:10px;
            }

            .control label {
                display:block;
                margin-bottom:3px;
            }

            table {
                border:1px solid #000;
                background-color:#FFFED1;
                width:500px;
            }

            table caption {
                border-top:1px solid #000;
                border-left:1px solid #000;
                border-right:1px solid #000;
                font-size:1.5em;
                background-color:#466180;       
                color:#fff;
                line-height:1.5em;
                padding:5px;                
            }

            table thead {
                background-color:#AAECC2;
            }

            table tbody {
                margin-top:15px;                
            }

            table tbody td {
                background-color:#fff;
            }           

        </style>
    </head>
    <body>      
        <div>
            <div class="control">
                <label for="enteredBy">Entered By</label>
                <input type="text" id="enteredBy"/>
            </div>
            <div class="control">
                <label for="blogEntry">Blog Entry</label>
                <textarea id="blogEntry" cols="50" rows="5"></textarea>
            </div>
            <div class="control">
                <button id="postEntry">Post</button>        
            </div>
        </div>
        <table>
            <caption>
                Blog Entries
            </caption>
            <thead>
                <tr>
                    <th>Entered By</th>
                    <th>Entry</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            $(function() {
                var blogEntries = [];

                // This code adds a click event handler to the "Post" button. (NOTE: This is the jQuery method of attaching a click event to an HTML element)
                $("#postEntry").click(function() {
                    // Get the values from the entered by and entry text input controls. (NOTE: This is the jQuery method of getting control values)
                    var enteredBy = $("#enteredBy").val();
                    var entryText = $("#blogEntry").val();

                    data.push( "enteredBy" );
data.push( "blogEntry" );

// Output resultant array.
console.log( data );

                    // TODO: Create a JSON representation of a blog post and assign it to the blogEntry variable.
                    // Note: A blog entry has properties enteredBy and entryText.
                    //var blogEntry = Your JSON goes here;

                    // TODO: Add the new blog entry to the blogEntries array. 
                    // Note: Use the array push method. You can read about it here http://www.bennadel.com/blog/1796-Javascript-Array-Methods-Unshift-Shift-Push-And-Pop-.htm


                    $.getJSON(
                    'entries.js',
                    function(blogEntries) {
                        blogEntries = getBlogEntries(selectedBlogEntries, allBlogEntries);
                    displayBlogEntries();   
                    }

                    );              
                });

                function displayBlogEntries() {
                    var tableRows = "";

                    //TODO: Loop through the blogEntries array. For each item in the array create an HTML table row.


                        $.each(blogEntries, function(key, value) {
                            var tableRow = "<tr>";

                            tableRow += "<td>" + value.enteredBy + "</td>";
                            tableRow += "<td>" + value.blogEntry + "</td>";
                            tableRow += "<td><input type=\"text\"/></td>";
                            tableRow += "</tr>";

                            tableRows += tableRow;
                        });
                    $("table tbody").html(tableRows);
                }
            });

        </script>
    </body>
</html>                                                                               This is my JSON array [{ "enteredBy": "blogEntry"}]

通过JQuery，JSON将条目名称和博客发布到自身下方的动态表中

0 个答案: