Показать сообщение отдельно
  #15 (permalink)  
Старый 18.02.2016, 09:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

AciDWarrioR,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
        td{
  width: 50px;
  border: 1px solid #000000;
  text-align: center;
  height: 50px;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
   $(function(){
       function fn(data, table) {
        var del = [];
        Object.keys(data).forEach(function(key) {
            var tr = $("tr", table).eq(key);
            Object.keys(data[key]).forEach(function(i) {
                var td = $("td", tr).eq(i);
                var len = data[key][i];
                td[0].colSpan = len;
                var temp = td.next();
                for (var k = 1; k < len; k++) {
                    temp.length && del.push(temp);
                    temp = temp.next()
                }
            })
        });
        $.each(del, function(i, td) {
            td.remove()
        })
    }

        var data = {
        1: { //индекс строки
            0: 2 //индекс ячейки с которой начать обьединение и colSpan
        },
        2: {
            0: 3
                }
    };
    window.setTimeout(function() {
        fn(data, $('table')) //функция обьединения ячеек (обьект с данными для обьединения, таблица в которой необходимо это сделать)
    }, 3E3)
   })
  </script>
</head>

<body>
   <table>
   	<thead>
   		<tr>
   			<th>Title 1</th>
   			<th>Title 2</th>
   			<th>Title 3</th>
   		</tr>
   	</thead>
   	<tbody>
   		<tr>
   			<td>Cell 1.1</td>
   			<td>Cell 1.2</td>
   			<td>Cell 1.3</td>
   		</tr>
   		<tr>
   			<td>Cell 2.1</td>
   			<td>Cell 2.2</td>
   			<td>Cell 2.3</td>
   		</tr>
   	</tbody>
   </table>
</body>

</html>
Ответить с цитированием