使用实时表单的Jquery HTML表问题

时间:2016-09-21 21:44:58

标签: javascript php jquery html css

我有一个更新SQL表的更新表单。

表单工作正常,问题与HTML部分有关。单击表格单元格时会出现一个弹出框,但由于某种原因,正在添加一个新列,导致HTML崩溃。

enter image description here

我已尝试在JS中进行更改但到目前为止没有运气。谁能告诉我这里有什么问题?

<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    
    <meta charset="utf-8">
    <title>Update Form</title>   
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div class="container">    

                <div class="row">
                    <table class= "table table-striped table-bordered table-hover">
                        <thead>
                            <tr>

                                <th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">Name</th>

                                <th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">Description</th>

                                <th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Status</th>
                            </tr>
                        </thead>

                        <tbody>
                        <?php
                        $sql = "EXEC dbo.sp_GOMDailyProd @Action = 'Read'";  
                        $query = sqlsrv_query($connect, $sql);  
                        $i=0;
                        while($fetch = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC))
                        {
                            if($i%2==0) $class = 'even'; else $class = 'odd';

                            echo'<tr class="'.$class.'">

                                <td class="xedit" id="'.$fetch['MerrickID'].'" key="name">'.$fetch['OilProd'].'</td>
                                <td class="xedit" id="'.$fetch['MerrickID'].'" key="details">'.$fetch['OilProd'].'</td>
                                <td class="xedit" id="'.$fetch['MerrickID'].'" key="status">'.$fetch['OilProd'].'</td>
                            </tr>';                         
                        }
                        ?>
                        </tbody>
                    </table>
        </div>
        <script src="assets/js/jquery.min.js"></script> 
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/bootstrap-editable.js" type="text/javascript"></script> 
<script type="text/javascript">
jQuery(document).ready(function() {  
        $.fn.editable.defaults.mode = 'popup';
        $('.xedit').editable();     
        $(document).on('click','.editable-submit',function(){
            var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);

            $.ajax({
                url: "process.php?id="+x+"&data="+y+'&key='+key,
                type: 'GET',
                success: function(s){
                    if(s == 'status'){
                    $(z).html(y);}
                    if(s == 'error') {
                    alert('Error Processing your Request!');}
                },
                error: function(e){
                    alert('Error Processing your Request!!');
                }
            });
        });
});
</script>
    </div>
</body>
</html>

0 个答案:

没有答案