HTML+CSS+JavaScript

Добрый день!
Мне необходимо написать скрипт, который позволял бы сдвигать таблицу на одну ячейку вправо или влево. С JS я плохо дружу, а он со мной. И времени на его освоение в данный момент нету. Как удалять создавать столбец я еще более менее представляю, пока не понимаю как мне определить что нужно добавить или удалить столбец в документе и как правильно получить данные. В общем помогите пожалуйста кусками кода или может даже есть кого-нибудь готовое или очень похожее решение.

В общем просто это делается.

<script type="text/javascript">    function insertCol() {      var tbl = document.getElementById("tbl");      for (var i = 0; i < tbl.rows.length; i++) {       newCell = tbl.rows[i].insertCell(-1);        newCell.innerHTML = 'new';     }    } </script <input type="button" value="Insert" onclick="insertCol()" /></td> <table id="tbl" border="1">  <tr>    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>  </tr>  <tr>    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>  </tr>  <tr>    <td>1</td>    <td>2</td>    <td>3</td>    <td>4</td>  </tr> </table>

Метод insertCell() указывает индекс новой ячейки относительно других - если равна 0, будут добавлены слева от первой ячейки, -1в конце последней, ну а при других соответственно заданному.

пока не очень разобрался. но сразу возник вопрос а как при добавлении столбца справа, удалить столбец слева?

Методом deleteCell(). Параметром является (отсчитываемое от нуля) индексное значение ячейки, которую необходимо удалить.

PS. Ну а сам код такой же будет - проходим все строки и удаляем из каждой требуемую ячейку.

Да вот так наверно не получится сделать( наверно саму таблицу тоже придется на JS стоить.
у меня в таблице где-то 7 столбцов пока получается, надо изначально выводить только 5, справа на лево. или изначально удалять столбцы слева?

вот моя таблица пример

<table align="center"> <colgroup> <col width="10px;"></col> <col width="10px;"></col> <col width="10px;"></col> <col width="10px;"></col> <col width="10px;"></col> <col width="10px;"></col> <col width="10px;"></col> </colgroup> <tbody> <tr> <th>2005</th> <th>2006</th> <th>2007</th> <th>2008</th> <th>2009</th> <th>2010</th> <th>2011</th> </tr> <tr> <td>6,85%</td> <td>6,0%</td> <td>6,2%</td> <td>7,5%</td> <td>9,7% руб.<br />7,2% вал.</td> <td>9,73% руб.<br />7,21% вал.</td> <td>7,65% руб<br />5,1% вал</td> </tr> </tbody> </table>

стыдно, но не знаю как в моем случае применить. не поможете, кодом? )
я вот пока читаю про dom, но тоже пока не получается применить

<script type="text/javascript">    function insertColumn() {      var tbl = document.getElementById("tbl");      for (var i = 0; i < tbl.rows.length; i++) {       newCell = tbl.rows[i].insertCell(-1);       tbl.rows[i].deleteCell(0);        newCell.innerHTML = 'new';     }    } </script>

Этот код добавляет один столбец справа, и сразу же удаляет левый столбец.
Что вам надо я так и не понял - есть начальные 5 столбцов, затем (по какому-то событию?) добавить справа 2 столбца, а левых два удалить?

Нет. Будет две кнопки: "назад" и "вперед". По кнопке назад - удалить правый столбец и добавить столбец слева с данными. По кнопке вперед удалить левый столбец и добавить столбец справа. По одному столбцу. Получится прокрутка таблицы влево и вправо по одному столбцу.

Ну тогда (если я правильно понял), то надо не удалять/добавлять столбцы, (предполагается же обычная смена данных?), а циклично, по кольцу, сдвигать массив данных и ими заполнять таблицу.

Это требуется? Если да, напишу.

Да. Именно это и требуется, только не циклично. Буду вам очень благодарен)

Тогда образец данных, которые будут выводиться в строке, и что несет в себе первая колонка, которая у вас в группе?

да та таблица что я писал и есть образец.

вот у меня такой массив получился

var Data = array (       array ('2005', '6,85%'),       array ('2006', '6,0%'),       array ('2007', '6,2%'),       array ('2008', '7,5%'),       array ('2009', '9,7% руб.<br>7,2% вал.'),       array ('2010', '9,73% руб.<br>7,21% вал.'),       array ('2011', '7,65% руб.<br>5,1% вал'),     );

Напишу.

А для чего у вас colgroup (и, дай бог памяти, вроде бы как и не так описывается), если указывается одинаковая ширина колонок?

Эта форма в визуальном редакторе сделана, даже не знаю, наверное просто чтобы ширину в них задать. В общем она ни к чему. Просто скопировал как было и в таблице она не нужна

В общем, если фиксировано 7 колонок, две строки, и отображать по пять колонок, то:

var Data = [[2005, '6,85%'],[2006, '6,0%'],              [2007, '6,2%'],[2008, '7,5%'],              [2009, '9,7% руб.<br>7,2% вал.'],              [2010, '9,73% руб.<br>7,21% вал.'],              [2011, '7,65% руб.<br>5,1% вал']];  function shiftCol(dir) {    if(!dir && Data[0][0] > 2005) {       Data.unshift(Data.pop());       cellsTable();    }    if(dir && Data[4][0] < 2011) {       Data.push(Data.shift());       cellsTable();    }    function cellsTable() {       var tbl = document.getElementById("tbl");       for(var i=0; i<5; i++) {         tbl.rows[0].cells[i].innerHTML = Data[i][0];         tbl.rows[1].cells[i].innerHTML = Data[i][1];       }    } } <table id="tbl">   <tr>      <th>2005</th>      <th>2006</th>      <th>2007</th>      <th>2008</th>      <th>2009</th>    </tr>    <tr>      <td>6,85%</td>      <td>6,0%</td>      <td>6,2%</td>      <td>7,5%</td>      <td>9,7% руб.<br />7,2% вал.</td>    </tr>  </table> <input type="button" value="<<" onclick="shiftCol(0)" /> <input type="button" value=">>" onclick="shiftCol(1)" />

Проверка конечных значений для кнопок назад/вперед происходит по дате (это число и не надо его в кавычки), а так как массив сдвигается вправо/влево, и выводятся постоянно его первые пять элементов, то значит проверка по элементу 0.0 и 4.4. В общем, думаю , понятно. )

Ух! Большое Вам спасибо!)) Очень Вам обязан!)) дальше надеюсь разберусь

Разбирайтесь. Но если эти данные только ради примера, а на самом деле иное, то учтите,
массив сдвигается по кольцу, в зависимости от направления, то есть левые элементы в конец или наоборот - это для того, чтобы хранить данные.
Можно было бы и по другому поступить - объявить указатель положения, который изменять от направления, значение которого присваивать затем счетчику в цикле, ну а далее тоже самое.

Данные такие. Все как надо. Вот споткнулся уже на первой правке) как сделать чтобы изначально выводились года с 2007 - 2011?

Массив начните с этих годов. Я же написал - массив сдвигается, а значит... )

var Data = [[2007, '6,2%'],[2008, '7,5%'],              [2009, '9,7% руб.<br>7,2% вал.'],              [2010, '9,73% руб.<br>7,21% вал.'],              [2011, '7,65% руб.<br>5,1% вал'],             [2005, '6,85%'],[2006, '6,0%']];

Ну и таблица с этого года должна быть заполнена по умолчанию.

Аа.. Вон оно что) А я таблицу просто заполнил и не мог понять почему кнопка назад не работает) Спасибо еще раз!)

Потому, что по дате сравнение, но не той, что в таблице, а той, что в массиве - по нулевому элементу первого элемента его (сравнение влево - 2005), и по нулевому элементу пятого элемента (сравнение вправо - 2011).

То что Вы написали подходит. Спасибо! Я только не знаю как мне данные в таблицу подставлять нужные