VPF::Динамическое изменение таблицы через форму и

Pris

Дата 30.4.2011, 16:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 30.4.2011

Репутация: нет
Всего: нет

Здравствуйте! Существует таблица которая выводится из базы данных в php скрипт, как сделать так что бы в ней можно было по желанию добавлять новые столбцы или прятать уже существующие? Заранее спасибо! я ничего не знаю в JS и не умею пользоваться поиском по интернету!

Это сообщение отредактировал(а) Pris - 30.4.2011, 16:22

Котокобра

Дата 30.4.2011, 22:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: 0
Всего: 4

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

может имеет смысл отформатировать контент столбцами? то есть, дивы рядом или несколько таблиц шириной в одну ячейку?
в php это можно решить, набирая в n переменных столбики, потом заворачивая их в контейнеры.

как такой вариант?

Pris

Дата 1.5.2011, 04:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 30.4.2011

Репутация: нет
Всего: нет

Ничего не понятно, но мне этот вариант нравится! А как это сделать?

Котокобра

Дата 1.5.2011, 05:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 147
Регистрация: 26.11.2009

Репутация: 0
Всего: 4

вот, сделал от нефиг делать...

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Web2js (task #1)</title>
<script type="text/javascript">
// ===================================================================== //
var Web2js = {t1:{
tbl: {}, // хранит ссылку на таблицу
trCount: 0, // хранит количество строк

init: function(x) { // устанавливаем tbl и trCount, и добавляем шапку таблице
    this.tbl = document.getElementById(x).getElementsByTagName('tbody')[0];
    var tr = this.tbl.getElementsByTagName('tr');
    this.trCount = tr.length + 1;
    var td = tr[0].getElementsByTagName('td');
    if(td.length==0) td = tr[0].getElementsByTagName('th');
    var th = document.createElement('tr');
    th.className = 'tableKeys';
    for(i=0; i<td.length; i++)
        th.appendChild(document.createElement('th'));
    this.tbl.insertBefore(th, tr[0]);
    this.setKeys();
},


removeColumn: function(x) { // функция удаления столбца
    var tr = this.tbl.getElementsByTagName('tr');
    for(i=0; i<this.trCount; i++){ // обходим все строки и удаляем из них либо header, либо ячейку
        var th = tr[i].getElementsByTagName('th')[parseInt(x)];
        var td = tr[i].getElementsByTagName('td')[parseInt(x)];
        if(th)tr[i].removeChild(th);
        if(td)tr[i].removeChild(td);
    }
    this.setKeys(); // переопределяем для кнопок значения столбцов
},


addColumnL: function(x) {
    var tr = this.tbl.getElementsByTagName('tr');
    for(i=0; i<this.trCount; i++){ // обходим все строки и добавляем в них либо header, либо ячейку
        var th = tr[i].getElementsByTagName('th')[parseInt(x)] ;
        var td = tr[i].getElementsByTagName('td')[parseInt(x)];
        var newtd = document.createElement('td');
        var oldtd = tr[i].getElementsByTagName('td')[parseInt(x)];
        if(th){
            newtd = document.createElement('th');
            oldtd = tr[i].getElementsByTagName('th')[parseInt(x)];
        }
        newtd.innerHTML = this.tdValues(parseInt(x)+1, i+1); //'empty';
        tr[i].insertBefore(newtd, oldtd);
    }
    this.setKeys(); // переопределяем для кнопок значения столбцов
},


addColumnR: function(x) {
    var tr = this.tbl.getElementsByTagName('tr');
    for(i=0; i<this.trCount; i++){ // обходим все строки и добавляем в них либо header, либо ячейку
        var th = tr[i].getElementsByTagName('th')[parseInt(x)] ;
        var td = tr[i].getElementsByTagName('td')[parseInt(x)];
        var newtd = document.createElement('td');
        var oldtd = tr[i].getElementsByTagName('td')[parseInt(x)+1];
        if(th){
            newtd = document.createElement('th');
            oldtd = tr[i].getElementsByTagName('th')[parseInt(x)+1];
        }
        newtd.innerHTML = this.tdValues(parseInt(x)+2, i+1); // 'empty';
        if(oldtd)
            tr[i].insertBefore(newtd, oldtd);
        else
            tr[i].appendChild(newtd);
    }
    this.setKeys(); // переопределяем для кнопок значения столбцов
},


setKeys: function() {
    var tr = this.tbl.getElementsByTagName('tr');
    var td = tr[0].getElementsByTagName('th');
    for(i=0; i<td.length; i++){
        td[i].innerHTML =
            '<a href="javascript:Web2js.t1.addColumnL(' + i + ');">–Al–</a> : ' +
            '<a href="javascript:Web2js.t1.removeColumn(' + i + ');">–D–</a> : ' +
            '<a href="javascript:Web2js.t1.addColumnR(' + i + ');">–Ar–</a>';
    }
},


tdValues: function(x, y) { // функция, возвращающая HTML ячеек
    return 'col: ' + x + ', row: ' + y;
}

}}

// ===================================================================== //
</script>

<style type="text/css">
body {font:12pt Arial;}
h1 {font-size:14px; margin:24px 6px;}
th {font-size:10pt;}
a {text-decoration:none;}
.tableKeys th {background-color:#ccc; padding:0px 4px;}
div.footnotes {font-size:10pt; margin-top:14px;}
</style>
</head>




<body>


<script type="text/javascript">
    window.onload = function(){
        Web2js.t1.init('tbl');
    }
</script>


<h1>Web2js (task #1): Добавление и удаление столбцов</h1>

<table id="tbl" border="1">
<tbody>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</tbody>
</table>

<div class="footnotes">
    –D– means "Delete" <br />
    –Al– means "Add at left" <br />
    –Ar– means "Add at right"
</div>


</body>
</html>

Добавлено через 34 секунды

Цитата(Pris @ 1.5.2011, 04:37

)

Ничего не понятно, но мне этот вариант нравится! А как это сделать?

доступ к php-файлу есть?

WolfAlone

Дата 3.5.2011, 10:06 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

Для начала я бы научился пользоваться поиском по интернету, а потом использовал какой-нибудь JQuery или какой-то другой JS-фреймворк. Не знаю, как на счёт столбцов (не пробовал), но строки в таблицу с его помощью добавляются/удаляются элементарно. Уверен, что столбцы не сложнее.

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »