Форум

taktak · #1 (**permalink**) 05.02.2015, 15:30

есть много таблиц, генерируются динамически, нужно разделить на две колонки, пробую обернуть в div, но не получается.

<script>
$('table:eq(2)').append('</div><div class="2">');
</script>

<table>
<tr>
<td></td><td></td>
</tr>
</table>

<table>
<tr>
<td></td><td></td>
</tr>
</table>
<table>
<tr>
<td></td><td></td>
</tr>
</table>

<table>
<tr>
<td></td><td></td>
</tr>
</table>

ksa · #2 (**permalink**) 05.02.2015, 16:45

Сообщение от taktak

пробую обернуть в div, но не получается.

<script>
$('table:eq(2)').append('</div><div class="2">');
</script>

Это не "оборачивание"...

Метод append() выполняет совсем другие действия

Цитата:

Добавляет контент внутрь каждого элемента набора. Добавляемый контент следует за уже существующим.
Данный метод подобен применению appendChild.

http://jquery-docs.ru/Manipulation/append/

ksa · #3 (**permalink**) 05.02.2015, 16:49

Сообщение от taktak

table:eq(2)

Этот селектор вообще выбирает только одиночный элемент...

Сообщение от taktak

есть много таблиц, генерируются динамически, нужно разделить на две колонки

Как вариант...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.right {
	float: right;
}
</style>
<script type='text/javascript'>
$(function(){
	$('table:even').wrap('<div class="right"></div>');
});
</script>
</head>
<body> 
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>

<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>

<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>
</body>
</html>

taktak · #4 (**permalink**) 05.02.2015, 18:22

спасибо большое, интересный вариант. а на javascript (без подключения библиотек) есть какое-то решение ?

freee · #5 (**permalink**) 06.02.2015, 00:53

Сообщение от taktak

а на javascript (без подключения библиотек) есть какое-то решение ?

Может как-то так,

<html>
<head>
<style>
.right {
    float: right;
}
</style>
</head>

<body>
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>

<script>

c=0
;[].forEach.call(document.querySelectorAll("table"), function(el){if(c++%2==0) el.className="right"})


</script>

</body>
</html>

?

ksa · #6 (**permalink**) 06.02.2015, 09:03

Сообщение от freee

Может как-то так,

Что же ты, используя document.querySelectorAll(), не взял "мой" селектор?

ksa · #7 (**permalink**) 06.02.2015, 09:14

Сообщение от taktak

а на javascript (без подключения библиотек) есть какое-то решение ?

Разумеется!

Вот вариант вообще без скриптов.

<!DOCTYPE html>
<html ng-app>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
table:nth-child(odd) {
	float: right;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>

<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>

<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>
</body>
</html>

Правда и оборачивания ДИВами тут нет...

Форум

Справочник

Discord чат

Курсы javascript