如何知道在jquery模式对话框中选择哪一行

时间：2013-05-29 09:59:08

标签： javascript jquery jquery-dialog

我使用jquery对话框设计了一个页面。假设有5行，我想编辑或删除特定行，例如第三行。通过在谷歌搜索我得到了这个

$(document).ready(function(){
    $("#dlgConfirm").hide();
});
<!-- the following lines are for deleting the row-->
$(function() {
    $(".deleteRow").click(function(){
        var $row = $(this).parents('tr');
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected Appointment": function() {
                    $row.remove();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });     
});
});

从页面删除但我还需要从数据库中删除。所以我想知道如何获取列值和行值，以便我可以使用从表中删除row = 3

！[在此处输入图片说明] [1]

显示表格代码如下

<%DataBaseConnection db=new DataBaseConnection();
        Connection con=db.connet();
        try
        {
            PreparedStatement pt= con.prepareStatement("select * from Appointments where login='"+session.getAttribute("login")+"' order by date desc");
            ResultSet rs=pt.executeQuery();
            while(rs.next())
            {
                %><tr>
                <td><%=rs.getString("Name") %></td>
                <td><%=rs.getString("Date") %></td>
                <td><%=rs.getString("StartTime") %></td>
                <td><%=rs.getString("EndTime") %></td>
                <td><%=rs.getString("Description") %></td>
                <td>
                    <!--<input type="button" id="edit" value="" onclick="" /><img src="edit.png">-->
<a href="#" class="edit-btn"><img src="edit.png" alt="edit">
                </td>
                <td>
                   <!-- <input type="button" id="delete" value="Delete" />-->
<a href="#" class="deleteRow"><img src="delete.png" height="20" width="20" alt="delete">
                </td>
            </tr>
            <%}
        }
        catch(Exception e)
        {
            out.println(e);
        }

完整代码 

<%@page import="java.sql.*" %>
<%@page import="DB.*" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Appointment</title>
<link href="jtable/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<link rel="stylesheet" type="text/css" href="styles.css" />




<style>
body {
    font-size: 62.5%;
}
label, input {
    display:block;
}
input.text {
    margin-bottom:12px;
    width:95%;
    padding: .4em;
}
fieldset {
    padding:0;
    border:0;
    margin-top:25px;
}
h1 {
    font-size: 1.2em;
    margin: .6em 0;
}
div#users-contain {
    width: 350px;
    margin: 20px 0;
}
div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}
div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}
.ui-dialog .ui-state-error {
    padding: .3em;
}
.validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
}
div#users-contain table tr:hover {
    border: 1px solid #c6c6c6;
    color: #333;
    text-decoration: none;
    transition: all 0.0s;
    background-color: #00ffff;
    box-shadow: 0 1px 1px rgba(0.2, 0.3, 0.4, 0.1);<!-- change rgba-->
}
</style>
<script>

var request;
var name;
var date;
var StartTime;
var EndTime;
var Description;
var allFields;
var tips;

function getRequestObject() {
    if (window.ActiveXObject) {
        return (new ActiveXObject("Microsoft.XMLHTTP"));
    } else if (window.XMLHttpRequest) {
        return (new XMLHttpRequest());
    } else {
        return (null);
    }
}

function sendRequest(name, date, startDate, endDate, description) {

    //alert($("#name").val(), $("#date").val(), $("#StartTime").val(), $("#EndTime").val(), $("#Description").val());

    request = getRequestObject();
    request.onreadystatechange = handleResponse;
    request.open("GET", "saveRecord.jsp?name=" + name + "&date=" + date + "&startDate=" + startDate + "&endDate=" + endDate + "&description=" + description, true);
    request.send(null);
}

function handleResponse() {
    if (request.readyState == 4 && request.status == 200) {
//        alert(request.responseText);
alert("success");
    }
}


$(function () {
       name = $("#name"),
        date = $("#date"),
        StartTime = $("#StartTime"),
        EndTime = $("#EndTime"),
        Description = $("#Description"),
        allFields = $([]).add(name).add(StartTime).add(EndTime).add(Description).add(date),
        tips = $(".validateTips");

    function updateTips(t) {
        tips.text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips(n + " can not be empty");
            return false;
        } else {
            return true;
        }
    }
function checkTime(z,y)
{
if (y.val()<z.val()) {
            z.addClass("ui-state-error");
            updateTips( " start time can not be more than end time");
            return false;
        } else {
            return true;
        }
}

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create Appointment": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");
 bValid = bValid && checkLength( name, "Name", 1, 16 );
bValid = bValid && checkLength( date, "date", 1, 80 );
bValid = bValid && checkLength( StartTime, "Start Time", 1, 16 );
bValid = bValid && checkLength( EndTime, "End Time", 1, 16 );
bValid = bValid && checkTime(StartTime,EndTime);
                if (bValid) {
                    $("#users tbody").append("<tr>" +
                        "<td>" + name.val() + "</td>" +
                        "<td>" + date.val() + "</td>" +
                        "<td>" + StartTime.val() + "</td>" +
                        "<td>" + EndTime.val() + "</td>" +
                        "<td>" + Description.val() + "</td>" +
                        "<td>" + '<a href="#"><img src="edit.png" alt="edit">' + "</td>" +
                        "<td>" + '<a href="#" class="deleteRow"><img src="delete.png" height="20" width="20" alt="delete">' + "</td>" +
                        "</tr>");

                //alert(name.val());
        sendRequest(name.val(), date.val(), StartTime.val(), EndTime.val(), Description.val());
                $(this).dialog("close");}
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });
    $('.edit-btn').click(function() { $("#dialog-form").dialog("open"); });
    $("#create-user")
        .button()
        .click(function () {
        $("#dialog-form").dialog("open");
$('#date').datepicker({
      dateFormat: 'yy-mm-dd'
});
 $("#dialog-form").dialog();    
    });
});
$("#dialog-form").hide();

$(document).ready(function(){
    $("#dlgConfirm").hide();
});
<!-- the following lines are for deleting the row-->
$(function() {
    $(".deleteRow").click(function(){
        var $row = $(this).parents('tr');
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected Appointment": function() {
                    $row.remove();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });     
});
});
<!--deleting the row ends here-->
</script>
</head>
<body>
<section id="page">
<div id="dialog-form" title="Create new Appointment">
    <p class="validateTips">All form fields are required.</p>
    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
            <label for="date">Date</label>
            <input type="text" name="date" id="date" value="yyyy-mm-dd" class="text ui-widget-content ui-corner-all"  />
            <label for="StartTime">Start Time</label>
            <input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all"  />
            <label for="EndTime">End Time</label>
            <input type="text" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" />
            <label for="Description">Description</label>
            <input type="text" name="Description" id="Description" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<div id="users-contain" class="ui-widget">
    <div align="center">
            <h1>Appointment Details</h1>

    </div>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th style="min-width:200px;max-width: 300px;">Name</th>
                <th style="min-width:100px;">Date</th>
                <th style="min-width:100px;">Start Time</th>
                <th style="min-width:100px;">End Time</th>
                <th style="min-width:250px;max-width: 250px;">Description</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        <%DataBaseConnection db=new DataBaseConnection();
        Connection con=db.connet();
        try
        {
            PreparedStatement pt= con.prepareStatement("select * from Appointments where login='"+session.getAttribute("login")+"' order by date desc");
            ResultSet rs=pt.executeQuery();
            while(rs.next())
            {
                %><tr>
                <td><%=rs.getString("Name") %></td>
                <td><%=rs.getString("Date") %></td>
                <td><%=rs.getString("StartTime") %></td>
                <td><%=rs.getString("EndTime") %></td>
                <td><%=rs.getString("Description") %></td>
                <td>
                    <!--<input type="button" id="edit" value="" onclick="" /><img src="edit.png">-->
<a href="#" class="edit-btn"><img src="edit.png" alt="edit">
                </td>
                <td>
                   <!-- <input type="button" id="delete" value="Delete" />-->
<a href="#" class="deleteRow"><img src="delete.png" height="20" width="20" alt="delete">
                </td>
            </tr>
            <%}
        }
        catch(Exception e)
        {
            out.println(e);
        }

        %>
            <!--<tr>
                <td>name</td>
                <td>Date</td>
                <td>Start Time</td>
                <td>End Time</td>
                <td>Description</td>
                <td>
                    <input type="button" id="edit" value="Edit" onclick="" />
                </td>
                <td>
                    <input type="button" id="delete" value="Delete" />
                </td>
            </tr>-->
        </tbody>
    </table>
</div>
<button id="create-user">Create Appointments</button>
<!-- the following lines are for deleting the row-->
<div id="dlgConfirm" title="Delete the selected Appointment?">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    The selected details will be deleted and cannot be recovered. Are you sure?
    </p>
</div>
<!-- deleting rows ends here--></section>
</body>
</html>

当我写下面的代码时，我得到输出这种类型

$(".deleteRow").click(function(){
        var rowid = $(this).parents('tr').attr('id');
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected Appointment": function() {
                    removeRow(rowid);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        }); 
});

function removeRow(rowid){

    $.ajax({
        url: 'deleteAppointments.jsp',
        data: {id: rowid}

        success: function(){
             $('table tr#'+rowid).remove();
        }
    });

}

deleteAppointments.jsp的代码如下

<%!String id;String login;int uid; %>
<%
id=request.getParameter("id");
uid=Integer.parseInt(id);
DataBaseConnection db=new DataBaseConnection();
login=(String)session.getAttribute("login");
Connection con=db.connet();
try{
PreparedStatement pt=con.prepareStatement("delete from Appointments where UID="+uid+" and login='"+login+"'");
int result=pt.executeUpdate();
}

！[在此输入图片说明] [2]

1 个答案:

答案 0 :(得分：2)

您应该拥有用于标识数据库中某行的每一行的ID。这样，您只需要点击一个Web服务或URL，为其提供您需要删除的ID。 ：

$(".deleteRow").click(function(){
        var rowid = $(this).parents('tr').attr('id');
        $( "#dlgConfirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete selected Appointment": function() {
                    removeRow(rowid);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        }); 
});

function removeRow(rowid){

    $.ajax({
        url: 'myservice/deleteRow',
        data: {id: rowid}
        [some other stuff here...]
        success: function(){
             $('table tr#'+rowid).remove();
        }
    });

}

<强> HTML 我不知道你的HTML代码所以我只想描绘一个简单的例子

<table>
  <tr id="101">
   <td>User with id 101</td>
   <td class="deleteRow">Delete row</td>
  </tr>
</table>

编辑JSP 

<%DataBaseConnection db=new DataBaseConnection();
        Connection con=db.connet();
        try
        {
            PreparedStatement pt= con.prepareStatement("select * from Appointments where login='"+session.getAttribute("login")+"' order by date desc");
            ResultSet rs=pt.executeQuery();
            while(rs.next())
            {
                %><tr id="<%=rs.getString("UID") %>">
                <td><%=rs.getString("Name") %></td>
                <td><%=rs.getString("Date") %></td>
                <td><%=rs.getString("StartTime") %></td>
                <td><%=rs.getString("EndTime") %></td>
                <td><%=rs.getString("Description") %></td>
                <td>
                    <!--<input type="button" id="edit" value="" onclick="" /><img src="edit.png">-->
<a href="#" class="edit-btn"><img src="edit.png" alt="edit">
                </td>
                <td>
                   <!-- <input type="button" id="delete" value="Delete" />-->
<a href="#" class="deleteRow"><img src="delete.png" height="20" width="20" alt="delete">
                </td>
            </tr>
            <%}
        }
        catch(Exception e)
        {
            out.println(e);
        }

我在这里添加了你的resultSet中的ID，我在这里猜测所以请适应。 现在，当您生成行

时，每一行的ID都会设置为相应的UID
相关问题
最新问题