zoukankan      html  css  js  c++  java

  • JQuery 对表格的详细操作

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JQuery测试</title>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    %>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/validateForm.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/ajaxUtils.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>

    </head>


    <body>
    <style type="text/css">
    .hover {

    }
    </style>
    <table id="table1" border="1" cellpadding="0" cellspacing="0" width="70%">
    <tr>
    <th width="20%">
    <input type="checkbox" id="checkall" onclick="checkAll(this)"/>
    </th>
    <th width="20%">姓名</th>
    <th width="20%">性别</th>
    <th width="20%">密码</th>
    <th width="20%">地址</th>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox1" value="11" />
    </td>
    <td>张三</td>
    <td>男</td>
    <td>zhangsan</td>
    <td>上海</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox2" value="22"/>
    </td>
    <td>李四 <input type="text" id="aaId" value='AA' /></td>
    <td>男</td>
    <td>lisi</td>
    <td>安庆</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox3" />
    </td>
    <td>王五</td>
    <td>男</td>
    <td>beijing</td>
    <td>北京</td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" id="Checkbox4" />
    </td>
    <td>无名氏</td>
    <td>女</td>
    <td>wumingshi</td>
    <td>上海</td>
    </tr>
    <tr>
    <td >
    <input type="checkbox" id="Checkbox5" />
    </td>
    <td>赵老师</td>
    <td>男</td>
    <td>zhaolaoshi</td>
    <td>浙江</td>
    </tr>
    <tr>
    <td colspan="5" align="center">
    <input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" />
    <input type="button" id="btnSave" runat="server" value="alert" onclick="checkVal()" />

    <input type="button" onclick="jsAlertTDValue()" value="JSALERT">
    </td>
    </tr>
    </table>


    <script type="text/javascript">
    /* 
    操作：
    1.鼠标移动行变色
    方法一：jQuery中的hover(fun(),fun())方法，
    参数一：第一个方法是添加样式功能，
    */
    $("#table1 tr").hover(function(){ 
    $(this).children("td").addClass("hover");
    },function(){ 
    $(this).children("td").removeClass("hover"); 
    });
    //方法二：第二个方法是取消样式功能
    $("#table1 tr:gt(0)").hover(function() { 
    $(this).children("td").addClass("hover"); 
    }, function() { 
    $(this).children("td").removeClass("hover"); 
    }); 
    //2.奇偶行不同颜色
    $("#table1 tbody tr:odd").css("background-color", "#bbf"); 
    $("#table1 tbody tr:even").css("background-color","#ffc"); 
    $("#table1 tbody tr:odd").addClass("odd");
    $("#table1 tbody tr:even").addClass("even");

    /*********************删除信息***********************************************
    //3.隐藏一行
    $("#table1 tbody tr:eq(3)").hide(); 
    //4.隐藏一列
    //方法一：
    $("#table1 tr td::nth-child(3)").hide();

    //方法二：
    $("#table1 tr").each(function(){$("td:eq(3)",this).hide()}); 
    //5.//删除一行
    //删除除第一行外的所有行 
    $("#table1 tr:not(:first)").remove();
    //删除指定行
    $("#table1 tr:eq(3)").remove();

    //6.//删除一列
    //删除除第一列外的所有列 
    $("#table1 tr th:not(:nth-child(1))").remove();
    $("#table1 tr td:not(:nth-child(1))").remove();
    //删除第一列
    $("#table1 tr td::nth-child(1)").remove();
    ***********************************************************************/ 
    //7.得到（设置）某个单元格的值
    //设置table1,第2个tr的第一个td的值。 
    $("#table1 tr:eq(1) td:nth-child(2)").html("valueName"); 
    //获取table1,第2个tr的第一个td的值。 
    $("#table1 tr:eq(1) td:nth-child(1)").html();

    function checkVal(){


    //得到选择的 checkbox的值
    var radio_value = $("input[@type=checkbox][checked]").val();

    alert(" 得到选择的 checkbox值 "+radio_value);

    //alert("new Month"+$("#table1 tr:eq(2) td:eq(1)").html());
    alert($("#table1 tr:eq(2) td:nth-child(2)").text());
    }

    //8.插入一行：
    ///在第二个tr后插入一行 
    $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
    //9：获取每一行指定的单元格的值
    var arr = [];
    $("#table1 tr td:nth-child(2)").each(function (key, value) {
    arr.push($(this).html());
    });
    var result = arr.join(' ');
    alert(result);
    //全选或全不选
    //方法一：
    //全选或全不选 此传入的参数为event 如：checkAll(event)
    function checkAll(evt)
    {
    evt=evt?evt:window.event;
    var chall=evt.target?evt.target:evt.srcElement;
    var tbl=$("#table1");
    var trlist=tbl.find("tr");
    for(var i=1;i<trlist.length;i++)
    {
    var tr=$(trlist[i]);
    var input=tr.find("INPUT[type='checkbox']");
    input.attr("checked",chall.checked);
    }
    }
    //方法二：
    //全选或全不选 此传入的参数为this 如：checkAll(this)
    function checkAll(evt)
    {
    var tbl=$("#table1");
    var trlist=tbl.find("tr");
    for(var i=1;i<trlist.length;i++)
    {
    var tr=$(trlist[i]);
    var input=tr.find("INPUT[type='checkbox']");
    input.attr("checked",evt.checked);
    }
    }
    //方法三：
    //全选或全不选 此传入的参数为this 如：checkAll(this)
    function checkAll(evt)
    {
    $("#table1 tr").find("input[type='checkbox']").each(function(i){
    $(this).attr("checked",evt.checked)
    });
    }
    //方法四：
    /*全选或全不选 此传入的参数为this 如：checkAll(this)*/
    function checkAll(evt)
    {
    $("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
    }
    //客户端动态添加行
    function btnAddRow()
    {
    //行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
    var rownum=$("#table1 tr").length-2;
    var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
    var text="<input type='text' id='txt_"+rownum+"' value='aaa' name='txt_"+rownum+"' width='75px'/>";
    var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
    var row="<tr><td width='20%'>"+chk+"</td><td width='20%'>"+text+"</td><td width='20%'>"+sel+"</td><td width='20%'>"+text+"</td><td width='20%'>"+text+"</td></tr>";
    $(row).insertAfter($("#table1 tr:eq("+rownum+")")); 
    }
    //客户端删除一行
    //每次只能删除一行，删除多行时出错
    function btnDeleteRow()
    {
    $("#table1 tr").find("input[type='checkbox']").each(function(i){
    if($(this).attr("checked"))
    { 
    if(i!=0)//不能删除行标题
    {
    $("#table1 tr:eq("+i+")").remove();
    }
    }
    });
    }
    //这个比上面的要好，可以一下删除多个记录
    function btnDeleteRow()
    {
    $("#table1 tr").each(function(i){
    var chk=$(this).find("input[type='checkbox']");
    if(chk.attr("id")!="checkall")//不能删除标题行
    {
    if(chk.attr("checked"))
    {
    $(this).remove();
    }
    }
    });
    }
    //客户端保存
    function btnSaveClick()
    {
    //find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
    //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
    //alert($(this).val());
    //});

    $("#table1 tr").find("td").each(function(i){
    if($(this).find("input[type='text']").length>0)
    {
    alert($(this).find("input[type='text']").val());
    }
    else if($(this).find("select").length>0)
    {
    alert($(this).find("select").val());
    }
    });
    }

    //jS得到表所对应的控件值 
    function jsAlertTDValue(){
    var tab=document.getElementById("table1");
    alert(tab.rows[2].cells[1].childNodes[1].value);


    }

    </script>
    </body>
    </html>

     
  • 相关阅读:
    快速排序
    ​直接插入排序（Straight Insertion Sort）
    希尔排序（Shell Sort）
    直接选择排序（Straight Selection Sort）
    安卓倒计时
    Could not resolve com.android.support:multidex:1.0.2
    黄油刀的配置文件
    黄油刀的配置文件
    Unable to start activity ComponentInfo{com.example.administrator.myapplication/com.example.administrator.myapplication.MainActivity}: android.view.InflateException: Binary XML file line #0: Binary XM
    java禁止实例化的工具类
  • 原文地址：https://www.cnblogs.com/summer_adai/p/3810253.html
Copyright © 2011-2022 走看看