<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/css.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
<!--  
    <table id="table1" border="1">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>555</td>
            <td>333</td>
        </tr>
        <tr>
            <td>111</td>
            <td>888</td>
            <td>333</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>333</td>
        </tr>
    </table> -->
    <table class="table table-bordered table-hover table-striped">
        <caption>边框表格布局</caption>
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
                <th>邮编</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
                <td>560001</td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
                <td>400003</td>
            </tr>
            <tr>
                <td>Uma</td>
                <td>Pune</td>
                <td>411027</td>
            </tr>
        </tbody>
    </table>

 
    <!-- <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script>
 
    jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
          return this.each(function(){
             var that;
             $('tr', this).each(function(row) {
                $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                   if (that!=null && $(this).html() == $(that).html()) {
                      rowspan = $(that).attr("rowSpan");
                      if (rowspan == undefined) {
                         $(that).attr("rowSpan",1);
                         rowspan = $(that).attr("rowSpan"); }
                      rowspan = Number(rowspan)+1;
                      $(that).attr("rowSpan",rowspan);
                      $(this).hide();
                   } else {
                      that = this;
                   }
                });
             });
          });
       }
       $(function() {
          $("#table1").rowspan(2);//传入的参数是对应的列数从0开始  第一列合并相同
          // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
       });
    </script>
</html>