Question

您好我正在学习jquery，我遇到以下代码问题：

<table class="table table-bordered table-striped table-hover datatable">
      <thead>
        <tr>
          <th>ID</th>
          <th>organisation Name</th>
          <th>User name</th>
          <th>Email</th>
          <th>Contact No</th>
          <th>IP</th>
          <th>Date</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
          <tr> <td>3</td>
        <td>Harshit </td>
        <td>AtulSaini</td>
        <td>arpitkumar@gmail.com</td>
        <td>7860458</td>
        <td>::1</td>
        <td>14/03/2015</td><td><button id="status"><span class="label label-success">Active</span></botton></td></tr>

        <tr class="warning"> <td>4</td>
        <td>Meghaa.co.edu</td>
        <td>megha</td>
        <td>meghaa.sing@gmail.com</td>
        <td>7860458</td>
        <td>::1</td>
        <td>14/03/2015</td><td><button id="status"><span class="label label-warning">Deactive</span></botton></td>
        </tr>            

      </tbody>
    </table>

我想要jquery解决方案。当我点击id=status的按钮时，该特定<tr>的第一个td被选中并使用Ajax发送。作为回应，<tr>的班级从警告切换到成功，<button> span类也从label-warning切换到label-success。

这是我尝试过的代码：

 <script type="text/javascript">
 $(document).ready(function(){
            $("#status").click(function(){
              var id=$(this tr).find('td:first').html();
              var status=$("span").html();
              var xmlhttp;  
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var res=xmlhttp.responseText;
                    alert(res);
                    if(res=="n")
                    {
                      $(this tr).removeClass("success");
                      $(this tr).addClass("warning");                      
                    }
                    else{
                     $(this).parents('tr').removeClass("warning");
                      $(this).parents('tr').addClass("success");
                    }
                }
            }
            xmlhttp.open("GET","scripts/update.php?id="+id+"&status="+status,true);
            xmlhttp.send();

            });
        });

Answer 1

$(document).ready(function() {
    $("#status").click(function() {
        var id = $(this).children("tr").find('td:first').html();
        var status = $("span").html();
        $.ajax({
            url : "scripts/update.php",
            type : 'GET',
            data : {
                "id" : id,
                "status" : status
            },
            error : function(xhr, status, error) {
                alert(error);
            },
            success : function(entry) {
                var res = entry;
                alert(res);
                if (res == "n") {
                    $(this).children("tr").removeClass("success");
                    $(this).children("tr").addClass("warning");
                } else {
                    $(this).parents('tr').removeClass("warning");
                    $(this).parents('tr').addClass("success");
                }
            }
        });
    });
});

尝试使用JQuery ajax更快更容易使用，而且代码少得多。当然，您不必关心跨浏览器问题。希望我能提供帮助。

Answer 2

由于你评论我的解决方案，我意识到你真正想要用代码做什么，所以现在这里是一个修改版本，应该可以正常工作。

$(document).ready(function() {
    $("#status").click(function() {
        var status = $("span").html();
        $(this).children("tr").each(function() {
            var id = $(this).find('td:first').html();
            $.ajax({
                url : "scripts/update.php",
                type : 'GET',
                data : {
                    "id" : id,
                    "status" : status
                },
                error : function(xhr, status, error) {
                    alert(error);
                },
                success : function(entry) {
                    var res = entry;
                    alert(res);
                    if (res == "n") {
                        $(this).children("tr").removeClass("success");
                        $(this).children("tr").addClass("warning");
                    } else {
                        $(this).parents('tr').removeClass("warning");
                        $(this).parents('tr').addClass("success");
                    }
                }
            });
        });
    });
});

我希望这就是你要找的东西。祝Hans Hans好一天

编辑：也许您必须调整添加或删除功能的对象

JQuery - 在数据库中选择td

2 个答案: