jquery操作table表格,jquerytable表格

jquery操作table表格,jquerytable表格

一、数据准备  
<table id="table1">  
    <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
</table>  
<table id="table2">  
    <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
</table>  
<table id="table3">  
    <thead>  
        <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
    </thead>  
    <tbody>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    </tbody>  
</table>  
<table id="table4">  
    <thead>  
        <tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>  
    </thead>  
    <tbody>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
        <tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>  
        <tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr>  
    </tbody>  
</table>  

二、操作
<script type="text/javascript">
//1.鼠标移动行变色
    $("#table1 tr").hover(function(){  
        $(this).children("td").addClass("hover")  
    },function(){  
        $(this).children("td").removeClass("hover")  
    })  
    $("#table2 tr:gt(0)").hover(function() {  
        $(this).children("td").addClass("hover");  
    }, function() {  
        $(this).children("td").removeClass("hover");  
    });  

//2.奇偶行不同颜色 
    $("#table3 tbody tr:odd").css("background-color", "#bbf");  
    $("#table3 tbody tr:even").css("background-color","#ffc");   
    $("#table3 tbody tr:odd").addClass("odd")  
    $("#table3 tbody tr:even").addClass("even")  

//3.隐藏一行
    $("#table3 tbody tr:eq(3)").hide();  

//4.隐藏一列
    $("#table5 tr td::nth-child(3)").hide();  
    $("#table5 tr").each(function(){$("td:eq(3)",this).hide()});   

//5.删除一行 
// 删除除第一行外的所有行  
    $("#table6 tr:not(:first)").remove();  

//6.删除一列 
// 删除除第一列外的所有列  
    $("#table6 tr td:not(:nth-child(1))").remove();  

//7.得到(设置)某个单元格的值
//设置table7,第2个tr的第一个td的值。    
    $("#table7 tr:eq(1) td:nth-child(1)").html("value");    
    //获取table7,第2个tr的第一个td的值。    
    $("#table7 tr:eq(1) td:nth-child(1)").html();   

//8.插入一行:
//在第二个tr后插入一行  
    $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));

//删除指定行(第二行)
 $("#table3 tr:gt(0):eq(1)").remove();

(2)删除列,比如删除表格中的第二列:

//eq:获取子元素索引从 0 开始,先删除表头
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();

 (3)删除其它行,比如第二行之外的所有行:

 $("#table3 tr:gt(0):not(:eq(1))").remove();

(4)删除其它列,比如第二列之外的所有列:

//先删除表头
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();

 (5)隐藏行,比如隐藏第二行:

 $("#table3 tr:gt(0):eq(1)").hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");
(6)隐藏列,比如隐藏第二列:
$("#table3 tr th:eq(1)").hide();
 $("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
</script>

生机勃勃、数据希图table id=”table1″ trth小说标题/thth小说分类/thth发布时间/thth操作/th/tr
trtd测量检验/tdtd测量试验/tdtd测量检验…

本文实例叙述了js与jQuery完毕获取table中的数据并拼成json字符串操作。分享给咱们供大家仿效,具体如下:

基本代码如下:

JavaScript代码:

function tabToJSON(id) {
    var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组
    var titles = trs[0].getElementsByTagName("td");  //获得表头td数组
    var json = "";
    for(var i = 1; i < trs.length; i++) {
      var tds = trs[i].getElementsByTagName("td");  
      json += "{"; 
      //拼装json
      for(var j = 0; j < tds.length; j++) 
        json += titles[j].innerHTML + ":" + tds[j].innerHTML + ",";
      json = json.substring(0, json.length - 1) + "},";
    }
    json = "[" + json.substring(0, json.length - 1) + "]";
    document.getElementById("test").innerHTML = json;
}

jQuery代码:

function tabToJSONForJquery(id) {
    var titles = $("#" + id).find("tr:first td");  //获得表头td数组
    //遍历非表头的,tr、td...拼装json
    var json = "[" + $("#" + id).find("tr:not(:first)").map(function(i, e) {
      return "{" + $(e).children("td").map(function(j, el) {
        return $(titles[j]).html() + ":" + $(el).html();
      }).get().join(",") + "}";
    }).get().join(",") + "]";
    $("#test").html(json);
}

注:为方便测验,提议jQuery直接使用cdn如:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

测验HTML部分(table表格与json数据体现部分卡塔尔:

<table id="tbl" border="1">
<tr><td>编号</td><td>年龄</td><td>单元</td><td>房间号</td></tr>
<tr><td>1</td><td>25</td><td>1</td><td>1-2</td></tr>
<tr><td>2</td><td>22</td><td>1</td><td>1-1</td></tr>
<tr><td>3</td><td>21</td><td>3</td><td>3-3</td></tr>
<tr><td>4</td><td>20</td><td>2</td><td>2-2</td></tr>
<tr><td>5</td><td>35</td><td>4</td><td>4-2</td></tr>
</table>
<div id="test"></div>

使用在线HTML/CSS/JavaScript代码运转为工人身份具:测量试验获得json数据为:

发表评论

电子邮件地址不会被公开。 必填项已用*标注