需要通过复选框删除选定的行,只需一个删除按钮

时间:2013-04-16 11:11:02

标签: php jquery

好吧这是现在更新的主要php页面,香港专业教育学院清除了我以前的帖子,使其干净,仅供参考...我在这里发布的帖子只是我的测试页面,这是我的实际页面的精确复制品。只是有不同php页面名称......

    <link href="jquery-ui-1.10.2.custom/css/dark-hive/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-ui-1.10.2.custom/js/jquery-1.9.1.js" ></script>
    <script type="text/javascript" src="jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js" ></script>
    <script type="text/javascript" src="jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js" ></script>


    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="SMP1_deletefromDB.js"></script>
    <script>

   $(document).ready(function(){
      $("#results").show();
    });
    </script>
    <script type="text/javascript">
         $(document).ready(function(){
            $("#RetrieveList").on('click',function() {
                var xid = $('#XiD').val();
                var date = $('#Date').val();
                $.post('resultgenerator_test.php',{xid:xid, date:date}, function(data){
                $("#results").html(data);
                });
                return false;
            });
             });

        //post to delete.php file. In delete.php you can get the id's in $_POST['id'] as multidimensional array. You can handle the delete operation based on that
         $(document).ready(function(){
         $("#DeletefromDB").on('click',function() {
         //get all the checked values from checkboxes
         var ids = $('input[name=checkbox]:checked').map(function () {
             return this.value;
         }).get(); 

         if (ids.length === 0) 
             return false; //show some error message

         //post to delete.php file. In delete.php you can get the id's in $_POST['id'] as multidimensional array. You can handle the delete operation based on that
         $.post('deletedata.php',{id : ids}, function(data){
         $("#results").html(data);
             //handle the message based on success or error
         });

          return false;
    });
     });

    </script>

    </head>

    <body class="oneColFixCtrHdr">

    <div id="container" style="width:auto">
      <div id="header" style="background-color:#7BD12E">
        <h1 align="left" style="color:#FFF; font-family: Arial, Helvetica, sans-serif;">PIS  Ticket Tracking System</h1>
      <!-- end #header --></div>
       <div id="mainContent">
        <h1 style="font-size:9"></h1>
        <form id="form1" name="form1" method="post" action="">
          <p>
            <label for="Back"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="Back" id="Back" value="Back To Main" href="#" onclick="return backAway();" />
          </p>
        </form>
        <form id="form2" name="form2" method="post" action="">

          <table width="741" border="0" align="center">
            <tr>
              <th colspan="9" align="center" style="font-size:12px" scope="col">Xid, Name:<span>
                <select name="XiD" id="XiD">

                  <option value="AAA">AAA</option>
                  <option value="BBB">BBB</option>
                  <option value="CCC">CCC</option>
                  <option value="DDD">DDD</option>
                  <option value="EEE">EEE</option>
                  <option value="FFF">FFF</option>
                  <option value="" selected="selected"></option>
                </select>
              </span><span style="font-size:12px">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="date">Date:</label>
              <input type="text" name="Date" id="Date" />
              </span></th>
            </tr>
            <tr>
              <th colspan="9" scope="col">&nbsp;</th>
            </tr>
            <tr>
              <th colspan="9" scope="col">
                <div align="center">
                  <input name="action" type="button" id="RetrieveList" value="Retrieve List" />
                  <input name="action" type="button" id="DeletefromDB" value="Delete from DB" />
                  <input name="Clear" type="reset" id="Clear" value="Clear" />
                </div>
                <label for="Clear"></label>
                <div align="center"></div></th>
            </tr>

          </table>
    </form>
        <div id="results">
        </div>
      </div>

这是我的第二个php页面,它将数据回显为表格格式:请阅读下面的评论,因为我需要它来澄清......

   jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').prop('checked', this.checked);
    jQuery('input[name=checkbox]').prop('checked', this.checked);
  });


  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){

    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").prop("checked", true);
    } else {
        jQuery("input[name=checkall]").prop("checked", false);
    }
  });
});

</script>
<?php
require 'include/DB_Open.php';

$xid = $_POST['xid'];
$date = $_POST['date'];

$sql="SELECT ars_no, phone_number, category_1, category_2, status, create_date, resolved_date, trouble_type_priority, ban_type, employee_id_name 
        FROM tbl_main
        WHERE employee_id_name = '" . $xid . "' AND resolved_date = '" . $date . "'";
$myData = mysql_query($sql);



echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
<tr>
<th align='center'><input id=checkall name=checkall type=checkbox value='' /></th>
<th align='center'>Remedy Ticket No.</th>
<th align='center'>Phone/Incident No.</th>
<th align='center'>Category 2</th>
<th align='center'>Category 3</th>
<th align='center'>Status</th>
<th align='center'>Create Date</th>
<th align='center'>Severity</th>
<th align='center'>Ban Type</th>
<th align='center'>Resolved Date</th>

// *我已添加此标题,以便即时提取employee_id_name但只是隐藏它以便我可以从我的第3个php中删除它...我使用了以下但仍然显示一个非常小的单元格Xid栏...... *

<th align='center' style='display:none'>XiD</th>
</tr>"; 


while($info = mysql_fetch_array($myData)) 
{ 
echo "<form action='resultgenerator_test.php' method='post'>";

echo"<tr>"; 
echo "<td align='center'>" . "<input type=checkbox name=checkbox value=" . " </td>";
echo  "<td align='center'>" . $info['ars_no'] . "<input type=hidden name=ars_no value=" . $info['ars_no'] . " </td>";
echo  "<td align='center'>" . $info['phone_number'] . "<input type=hidden name=phone_number value=" . $info['phone_number'] . " size='11' maxlength='11' /> </td>"; 
echo  "<td align='center'>" . $info['category_1'] . "<input type=hidden name=category_1 value=" . $info['category_1'] . "' /> </td>"; 
echo  "<td align='center'>" . $info['category_2'] . "<input type=hidden name=category_2 value=" . $info['category_2'] . "' /> </td>";
echo  "<td align='center'>" . $info['status'] . "<input type=hidden name=status value=" . $info['status'] . "' /> </td>"; 
echo  "<td align='center'>" . $info['create_date'] . "<input type=hidden name=create_date value=" . $info['create_date'] . "' /> </td>";
echo  "<td align='center'>" . $info['trouble_type_priority'] . "<input type=hidden name=trouble_type_priority value=" . $info['trouble_type_priority'] . " size='1' maxlength='1' /> </td>"; 
echo  "<td align='center'>" . $info['ban_type'] . "<input type=hidden name=ban_type value=" . $info['ban_type'] . " size='1' maxlength='1' /> </td>";
echo  "<td align='center'>" . "<input type=text name=resolved_date value=" . $info['resolved_date'] . " size='8' maxlength='8' /> </td>";
echo  "<td align='center'>" . "<input type=hidden name=employee_id_name value=" . $info['employee_id_name'] . "' /> </td>";
echo "</tr>"; 
echo "</form>";
} 
echo "</table>"; 

include 'include/DB_Close.php';
?>
</body>
</html>

现在查看我建议和创建的第3个php页面...如果您在代码中看到任何错误,请更正:

最新更新删除php:

<?php
require 'include/DB_Open.php';

$id = $_POST['id'];
$idtodelete = "'" . implode("','",$id) . "'";

$query = "DELETE FROM tbl_main WHERE ars_no in (" . $idtodelete . ")";
$myData = mysql_query($query);

include 'include/DB_Close.php';
?>

感谢所有的帮助...:)

3 个答案:

答案 0 :(得分:1)

首先要注意的是,请在提交按钮(例如“操作”)上提供相同的名称,并在提交后在服务器端检查值:if ($_POST['action'] == 'Retrieve List') {} else if ($_POST['action'] == 'Delete from DB')

第二个问题,复选框的名称是关键:

<input type="checkbox" name="checkbox[]" value="{$info['ars_no']}"/>

然后在服务器端:

foreach($_POST['checkbox'] as $checkbox) {}

答案 1 :(得分:1)

您需要做的是使用提交按钮名称处理更新和删除操作。您需要做的是创建两个具有相同名称但值不同的提交按钮。

这是你的表格:

<form action="" method="post">
    <input name="action" type="submit" id="RetrieveList" value="RetrieveList" />
    <input name="action" type="submit" id="DeletefromDB" value="DeleteFromDB" />
    <input name="Clear" type="reset" id="Clear" value="Clear" />
</form>

我为两个action按钮指定了同名submit。提交此表单后,您可以检查服务器端的$_POST['action']

你可以这样做:

if ($_POST['action'] == 'RetrieveList') {
    //retreive list functionality
} elseif ($_POST['action'] == 'DeleteFromDB') {
    //delete from dB functionality.
}

<强>更新

您需要像这样更改表单:

echo "<form action='resultgenerator.php' method='post'>";
    echo '<input name="action" type="submit" id="DeletefromDB" value="Delete from DB" />';
    echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
            <tr>
            <th align='center'><input id=checkall name=checkall type=checkbox value='' /></th>
            <th align='center'>Remedy Ticket No.</th>
            <th align='center'>Phone/Incident No.</th>
            <th align='center'>Category 2</th>
            <th align='center'>Category 3</th>
            <th align='center'>Status</th>
            <th align='center'>Create Date</th>
            <th align='center'>Severity</th>
            <th align='center'>Ban Type</th>
            <th align='center'>Resolved Date</th>
            </tr>"; 

    while($info = mysql_fetch_array($myData)) { 
        echo"<tr>"; 
            echo "<td align='center'>" . "<input type='checkbox' name='checkbox[]' value='add the id here which needs to be deleted'/></td>";
            echo  "<td align='center'>" . $info['ars_no'] . "<input type=hidden name=ars_no value=" . $info['ars_no'] . " </td>";
            echo  "<td align='center'>" . $info['phone_number'] . "<input type=hidden name=phone_number value=" . $info['phone_number'] . " size='11' maxlength='11' /> </td>"; 
            echo  "<td align='center'>" . $info['category_1'] . "<input type=hidden name=category_1 value=" . $info['category_1'] . "' /> </td>"; 
            echo  "<td align='center'>" . $info['category_2'] . "<input type=hidden name=category_2 value=" . $info['category_2'] . "' /> </td>";
            echo  "<td align='center'>" . $info['status'] . "<input type=hidden name=status value=" . $info['status'] . "' /> </td>"; 
            echo  "<td align='center'>" . $info['create_date'] . "<input type=hidden name=create_date value=" . $info['create_date'] . "' /> </td>";
            echo  "<td align='center'>" . $info['trouble_type_priority'] . "<input type=hidden name=trouble_type_priority value=" . $info['trouble_type_priority'] . " size='1' maxlength='1' /> </td>"; 
            echo  "<td align='center'>" . $info['ban_type'] . "<input type=hidden name=ban_type value=" . $info['ban_type'] . " size='1' maxlength='1' /> </td>";
            echo  "<td align='center'>" . "<input type=text name=resolved_date value=" . $info['resolved_date'] . " size='8' maxlength='8' /> </td>";
        echo "</tr>"; 
    } 

    echo "</table>";

echo "</form>";

现在,您可以在 resultgenerator.php 文件中查看:

if ($_POST['action'] == 'DeleteFromDB') {
    $ids_to_be_deleted = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
    //$ids_to_be_deleted will contain all the checked id's from the other page. You can get all those values in the array. Handle the remaining operation for delete here.
}

NEW UPDATE:

因此,如果您使用jQuery提交表单,那么最好将表单提交绑定更改为按钮上的单击功能。您可以将表单更改为:

  <link href="jquery-ui-1.10.2.custom/css/dark-hive/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js" ></script>
<script type="text/javascript" src="jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js" ></script>


<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="SMP1_deletefromDB.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#RetrieveList").on('click',function() {
            var xid = $('#XiD').val();
            var date = $('#Date').val();
            $.post('resultgenerator.php',{xid:xid, date:date}, function(data){
            $("#results").html(data);
            });
            return false;
        });

        $("#DeletefromDB").on('click',function() {
            //get xid for delete like you do above. create a page delete.php or something and make an ajax call to some page to delete data
            return false;
        });
    });
</script>
</head>

<body class="oneColFixCtrHdr">

<div id="container" style="width:auto">
  <div id="header" style="background-color:#7BD12E">
    <h1 align="left" style="color:#FFF; font-family: Arial, Helvetica, sans-serif;">PIS  Ticket Tracking System</h1>
  <!-- end #header --></div>
   <div id="mainContent">
    <h1 style="font-size:9"></h1>
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label for="Back"></label>
        <input type="button" name="Back" id="Back" value="Back To Main" href="#" onclick="return backAway();" />
      </p>
    </form>
    <form id="form2" name="form2" method="post" action="">

      <table width="741" border="0" align="center">
        <tr>
          <th colspan="9" align="center" style="font-size:12px" scope="col">Xid, Name:<span>
            <select name="XiD" id="XiD">

              <option value="AAA">AAA</option>
              <option value="BBB">BBB</option>
              <option value="CCC">CCC</option>
              <option value="DDD">DDD</option>
              <option value="EEE">EEE</option>
              <option value="FFF">FFF</option>
              <option value="" selected="selected"></option>
            </select>
          </span><span style="font-size:12px">
          <label for="date">Date:</label>
          <input type="text" name="Date" id="Date" />
          </span></th>
        </tr>
        <tr>
          <th colspan="9" scope="col">&nbsp;</th>
        </tr>
        <tr>
          <th colspan="9" scope="col">
            <div align="center">
              <input name="action" type="button" id="RetrieveList" value="RetrieveList" />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="action" type="button" id="DeletefromDB" value="DeleteFromDB" />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Clear" type="reset" id="Clear" value="Clear" />
            </div>
            <label for="Clear"></label>
            <div align="center"></div></th>
        </tr>

      </table>
      <p>&nbsp;</p>
    </form>
    <div id="results">
    </div>
  </div>
 </body>
</html>

这里我所做的是更改表单提交上的绑定事件,并在输入类型按钮的单击事件上绑定。我将类型提交更改为按钮。

现在,您可以检查每个按钮的单击事件并处理操作。

<强>更新

假设您在结果div中有检索到的列表。当用户选中复选框并单击删除按钮时,您可以使用以下脚本处理它:

$("#DeletefromDB").on('click',function() {
     //get all the checked values from checkboxes
     var ids = $('input[name=checkbox]:checked').map(function () {
         return this.value;
     }).get(); 

     if (ids.length === 0) 
         return false; //show some error message

     //post to delete.php file. In delete.php you can get the id's in $_POST['id'] as multidimensional array. You can handle the delete operation based on that
     $.post('delete.php',{id : ids}, function(data){
         //handle the message based on success or error
     });

      return false;
});

更新:

这可以是 delete.php 文件

$ids = isset($_POST['id']) ? $_POST['id'] : '';

if (!empty($ids)) {
   //implode the id's separated by commaas
   $ids_to_be_deleted = implode(',', $ids);

   $query = "DELETE FROM your_table WHERE field_to_be_checked IN ($ids_to_be_deleted)";
   //now run your query using mysql_query

}

NB::自PHP 5.5.0起,不推荐使用mysql *函数,将来会删除它们。相反,应使用MySQLiPDO_MySQL扩展程序

希望这可以帮助你:)

答案 2 :(得分:0)

您可以使用下拉列表,您可以选择是否要检索或删除:

<select name='choseaction'>
<option value="RetrieveList">Retrieve List</option>
<option value="DeletefromDB">Delete from DB</option>
</select>

然后使用单个提交按钮。

<INPUT TYPE ="Submit" Name ="Submit" VALUE ="Submit">

之后你可以这样验证:

  if ($_POST['choseaction']=='RetrieveList')
   {
   ...
   } else if ($_POST['choseaction']=='DeletefromDB')
     {
     ...
     }

希望这有帮助! 美好的一天。