个人中心
gpt4 book ai didi

javascript - 网站上的动态表格

转载 作者：行者123 更新时间：2023-11-29 22:18:49 25 4
gpt4 key购买 nike

您好，我想在按下编辑按钮时显示一个表单，然后在按下表单的保存按钮后，我想编辑我的数据库并显示新信息。我也需要在不刷新页面的情况下执行此操作。我是 jquery 的新手，但下面是我到目前为止所写的内容，然而， event.preventDefault();函数由于某种原因不工作，并且运行了表单操作。对于我的代码失败原因的任何帮助，将不胜感激!

<!doctype html>
<html lang="en">
<head>
<!-- Irrelevant scripts from the site go here -->
</head>
<body>
<!-- Lots of other code from the site is here -->
<div id="jqueryFunction"></div>
<script text="text/javascript">
    function checkEdit(ID){
        //Check the fields make sure they're not empty
        return true;
    }
</script>
<script text="text/javascript">
    function editV(ID, titleOld, descOld){
        document.getElementById("divForm" + ID).innerHTML = 
        "<form name=\"editDiv" + ID + "\" id=\"editDiv" + ID + "\" onsubmit=\"return checkEdit(" + ID + ");\" action=\"editvid.php\" method=\"POST\">" +
        "<input type=\"hidden\" name=\"divID\" id=\"divID\" value=\"" + ID + "\"/>" +
        "<input type=\"text\" name=\"titleNew" + ID + "\" id=\"titleNew" + ID + "\" value=\"" + titleOld + "\"/><br>" +
        "<textarea name=\"descNew" + ID + "\" id=\"descNew" + ID + "\">" + descOld + "</textarea><br>" +
        "<input type=\"submit\" value=\"Save\" class=\"alt_btn\">" +
        "</form>";
        document.getElementById("jqueryFunction").innerHTML = 
        "<script src=\"js/jquery-1.5.2.min.js\" type=\"text/javascript\"><\/script>" +
        "<script>" +
            "$(function(){" +
                "$('form[name=\"editDiv" + ID + "\"]').on('submit', function(event){" +
                    "event.preventDefault();" +
                    "var form = this;" +
                    "$.ajax({" +
                        "url: $(form).attr('action')," +
                        "type: \"POST\"," +
                        "data: {divID:$(form.divID).val(), titleN:$(form.titleNew).val(), descN:$(form.descNew).val()}," +
                        "success: function (response) {" +
                            "alert('response');" +
                        "}" +
                    "});" +
                "});" +
            "});" +
        "<\/script>";
    }
</script>
</body>

最佳答案

有许多更清洁的解决方案。我只是会隐藏表单，然后通过单击编辑来显示它。这是获取您的 parent ID 的示例。

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>

<style>
    .editForm {
        display:none;
    }
</style>
<script>
</script>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {

    $('.edit').click(function() {
        $('.editForm').fadeIn();
    });

    $('a.submit').click(function() {

        // get parents id
        var parentId = $(this).parent().parent().parent().attr('id');

        $.ajax({
          type: "POST",
          url: "some.php",
          data: { divId: parentId, aName: $('.aName').val() }
        }).done(function( msg ) {
          alert( "Data Saved: " + msg );
        });
    });

});
</script>

<body>

<div id="anId">
    <a class="edit">edit</a>
    <form class="editForm">
        <div>
            <input type="text" class="aName" />
            <a href="#" class="button submit">Submit</a>
        </div>
    </form>
</div>
</body>
</html>

关于javascript - 网站上的动态表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13572387/

25 4 0
文章推荐： android - 适用于 Android 的单声道 - ExpandableListView
文章推荐： Python MySQLdb "INSERT INTO"问题
文章推荐： 安卓市场 : Making my app "free"
文章推荐： javascript - 使用 jQuery 或任何其他方法删除样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com