动态编辑和删除特定行的表内容

时间：2018-01-23 14:26:32

标签： javascript php jquery 

    <html>
    <head>
    <TITLE>Category selection</TITLE>

    <style>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>
    function getsubcat(val) {
        $.ajax({
        type: "POST",
        url: "get_subcat.php",
        data:'subcat_id='+val,
        success: function(data){
            $("#subcat-list").html(data);
        }
        });
    }

    function selectcat(val) {
    $("#search-box").val(val);

    }
    </script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

    function arrangeSno()

        {
               var i=0;
                $('#pTable tr').each(function() {
                    $(this).find(".sNo").html(i);
                    i++;
                 });

        }
        $(document).ready(function(){
            $(".add-row").click(function(){
               // var cat = $("#cat_name").val();
                var sno = $('#pTable tr').length;
                var cat = $("#cat-list").val();

                var display = $("#displayname").val();
                var subcat = $('#subcat-list').val();
                var order = $('#privilage').val();
                var markup = "<tr><td>" + sno + "</td><td>"+ cat + "</td><td>" + display + "</td><td>"+ subcat+ "</td><td>"+ order+"</td><td><input type='button' id='edit' value='Edit'></td></tr>";
                $("table tbody").append(markup);
            });

        });    
    </script>

    </head>
    <body>
    </br></br>
    <form method="POST" action="">
    <div id="results">
    <h3 align="center">Welcome<i>&nbsp&nbsp<?php echo$row['email']?></i></h3>
    <h3 align="center"><strong>Choose Your Templates</strong></h3>
    </br></br>
    <div align="center">
    <div class="row">


    <label>Select your Category:</label>
    <select name="category" id="cat-list" class="demoInputBox"  onChange="getsubcat(this.value);">
    <option value="">Select Category</option></td>
    <?php
    $results=mysqli_query($con,"SELECT * FROM category");
    foreach($results as $category) {
    ?>
    <option value="<?php echo $category["cat_name"]; ?>"><?php echo $category["cat_name"]; ?></option>
    <?php
    }
    ?>
    </select>

    </div>
    </br>

    <div class="row">
    <label> Display Name:</label>
    <input type="text" name="display_name" id="displayname"/>
    </div>

    <div class="row">
    <label> Select your Subcategory:</label>
    <select name="pagename" id="subcat-list" class="demoInputBox">
    <option value="select">Select</option>
    </select>
    </div>

    <div>
    <label>Set Order</label>
    <select name="privilage" id="privilage">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
    </div>

    <div></br>
    <label>Database</label>
    <input type="text" id="db" name="database" value="<?php echo $row['databasenme'];?>" readonly />
    </div>

    <div></br>

    <input type="button" class="add-row" value="Submit">

        </form>
    </div>

    </form>
    </div>
        <?php
    }
    ?>
    </div>

    <table id="pTable">
            <thead>
                <tr>

                    <th>Slno</th>
                    <th>Category</th>
                    <th>Display Name</th>
                    <th>Subcategory</th>
                    <th>Order</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </body>
    </html>

上下文： 这是用于显示和编辑创建的表单的代码。首先，当单击表单中的提交按钮时，表单详细信息将添加到表格行中。我想动态编辑该行详细信息并将该表格内容输入数据库。

        <?php
        require('connection.php');
        session_start();
        $sql=mysqli_query($con,"SELECT * FROM `main_regis` WHERE `databasenme`= '". $_SESSION["databasenme"]."'");
        while($row = mysqli_fetch_array($sql)) {
        ?>
        <html>
        <head>
        <TITLE>Category selection</TITLE>

        <style>
        body{width:610px;font-family:calibri;}
        .frmDronpDown {border: 1px solid #7ddaff;background-color:#C8EEFD;margin: 2px 0px;padding:40px;border-radius:4px;}
        .demoInputBox {padding: 10px;border: #bdbdbd 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
        .row{padding-bottom:15px;}
           form{
                margin: 20px 0;
            }
            form input, button{
                padding: 5px;
            }
            table{
                width: 100%;
                margin-bottom: 20px;
                border-collapse: collapse;
            }
            table, th, td{
                border: 1px solid #cdcdcd;
            }
            table th, table td{
                padding: 10px;
                text-align: left;
            }
        </style>
        </head>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script>
        function getsubcat(val) {
            $.ajax({
            type: "POST",
            url: "get_subcat.php",
            data:'subcat_id='+val,
            success: function(data){
                $("#subcat-list").html(data);
            }
            });
        }

        function selectcat(val) {
        $("#search-box").val(val);

        }
        </script>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">

        function arrangeSno()

            {
                   var i=0;
                    $('#pTable tr').each(function() {
                        $(this).find(".sNo").html(i);
                        i++;
                     });

            }
            $(document).ready(function(){
                $(".add-row").click(function(){
                   // var cat = $("#cat_name").val();
                    var sno = $('#pTable tr').length;
                    var cat = $("#cat-list").val();

                    var display = $("#displayname").val();
                    var subcat = $('#subcat-list').val();
                    var order = $('#privilage').val();
                    var markup = "<tr><td>" + sno + "</td><td>"+ cat + "</td><td>" + display + "</td><td>"+ subcat+ "</td><td>"+ order+"</td><td><input type='button' id='edit' value='Edit'></td></tr>";
                    $("table tbody").append(markup);
                });

            });    
        </script>

        </head>



        <body>
<form method="POST" action="">
       <label>category</label>
<input type="text" name="category" id="category" />
 <label>sub category</label>
<input type="text" name="sub_category" id="sub_category" />
 <label>Display name</label>
<input type="text" name="display" id="display" />
 <label>privilege</label>
<input type="text" name="privilege" id="privilege" />
<input type="submit" name="submit" class="add-row"/>
</form>
        <table id="pTable">
                <thead>
                    <tr>

                        <th>Slno</th>
                        <th>Category</th>
                        <th>Display Name</th>
                        <th>Subcategory</th>
                        <th>Order</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

上下文：我有一个包含类别和子类别的表单。选择类别和相应的子类别后，我需要动态地将值输入到表单底部显示的表中，而不将数据输入数据库。此处显示的工作代码。我想通过单击编辑按钮动态编辑每一行，然后将内容保存到表中。

代码包含java脚本部分以动态包含每一行，但它不包含任何要传递给数据的id值。因此，我无法通过单击编辑按钮动态编辑行。

表单包含类别字段，子类别字段，显示名称，权限，并通过单击添加行按钮将这些值插入到表中。动态地，编辑按钮出现在表格内，但是在单击编辑按钮时，我无法动态编辑行。

0 个答案:

没有答案
相关问题
最新问题