博客

jQuery清空table表格除首行外的所有数据（ajax+ js实现动态画表及刷新数据）

  • Post author:
  • Post category:其他


其中tb是table的id。

$(“#tb tr:not(:first)”).html(“”);

或者是

$(“#tb tr:not(:first)”).empty(“”);

这种效率要比 for循环删除高： //var tb = document.getElementById(‘tb’);

//var rowNum = tb.rows.length;

//for (i = 1; i < rowNum; i++) {

// tb.deleteRow(i);

// //rowNum = rowNum – 1;

// //i = i – 1;

//}

jQuery清空table表格除首行外的所有数据实例：

ajax+ js实现动态画表及刷新数据 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestScreen.aspx.cs" Inherits="TestScreen" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="Script/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
    <script src="Script/bootstrap/js/bootstrap.js"></script>
     <script src="Script/jquery-3.1.0.min.js"></script>
     <script type="text/javascript">
         setInterval("myInterval()", 1000);//1000为1秒钟
         function myInterval() {
             myfunction();
         }
         window.onload = myfunction;
         function myfunction() {

             $.ajax({
                 //url: "Handler.ashx",
                 //type: "GET",
                 type: "POST",
                 url: "TestScreen.aspx/GetList",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",

                 success: function (data) {
                     debugger
                     //for (var i = 0; i < data.length; i++) {
                     //    debugger
                     //    var newTr = "<tr><td>" + data[i].医院名称 + "</td><td>" + data[i].科室 + "</td><td>" + data[i].处方号 + "</td></tr>";
                     //    $("#tb").append(newTr);
                     //}
                     var obj = $.parseJSON(data.d);
                     var newTr = "";
                     for (var i = 0; i < obj.length; i++) {
                         debugger
                         newTr += "<tr class='success'><td>" + obj[i].医院名称 + "</td><td>" + obj[i].科室 + "</td><td>" + obj[i].处方号 + "</td><td>"+obj[i].姓名+"</td><td>"+obj[i].付数+"</td><td>"+obj[i].次数+"</td><td>"+obj[i].包装量+"</td><td>"+obj[i].当前状态+"</td></tr>";

                     }
                     $("#tb  tr:not(:first)").html("");

                     $("#tb").append(newTr);
                 }
             });

         };


 </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <table class="table table-condensed" id="tb" style="margin-left:20px;margin-right:20px">
           <thead>
                        <tr>

                        <th>医院名称</th>
                        <th>科室</th>
                        <th>处方号</th>
                        <th>姓名</th>
                        <th>付数</th>
                        <th>次数</th>
                        <th>包装量</th>
                        <th>当前状态</th>
                        </tr>
                     </thead>
            <tbody>

            </tbody>

        </table>
    </div>
        <%--<asp:ListView ID="ListView1" runat="server" >
              <LayoutTemplate>
                <table class="table table-condensed">
                  <tbody  >
                     <thead>
                        <tr>

                        <th>医院名称</th>
                        <th>科室</th>
                        <th>处方号</th>
                        <th>姓名</th>
                        <th>付数</th>
                        <th>次数</th>
                        <th>包装量</th>
                        <th>当前状态</th>
                        </tr>
                     </thead>
                     <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
                  </tbody>
                </table>
              </LayoutTemplate>
               <ItemTemplate>
                 <tr class="success" id="test">
                    <%-- <td ><span style="font-size:large;margin-left:20px"><%# Eval("医院名称") %></span>   </td>
                      <td ><span style="font-size:large"><%# Eval("科室") %></span>   </td>
                       <td ><span style="font-size:large"><%# Eval("处方号") %></span>   </td>
                     <td ><span style="font-size:large"><%# Eval("姓名") %></span>   </td>
                     <td ><span style="font-size:large"><%# Eval("付数") %></span>   </td>
                     <td ><span style="font-size:large"><%# Eval("次数") %></span>   </td>
                     <td ><span style="font-size:large"><%# Eval("包装量") %></span>   </td>
                 <td ><span style="font-size:large"><%# Eval("当前状态") %></span>   </td>
                 </tr>
               </ItemTemplate>
        </asp:ListView>--%>
    </form>
</body>
</html>


版权声明：本文为lz37025原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。