Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Редактирование таблицы при помощи Jquery 
:(
    Опции темы
MagicPRO
Дата 15.12.2011, 13:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
проблема с each, в паре нужно использовать цикл for, а мне нужно без for. как поступить?!
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
$дмитрий
Дата 15.12.2011, 13:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


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

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

проблема с each, в паре нужно использовать цикл for, а мне нужно без for. как поступить?! 

Покажи пример с кодом, где там проблема с циклом
PM MAIL   Вверх
MagicPRO
Дата 16.12.2011, 02:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
Все получилось. each был заменен на clone. Может не самый лучший вариант, но на данную задачу пойдет!
Рабочий вариант
Спасибо всем за помощь!
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
MagicPRO
Дата 19.12.2011, 16:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
Теперь новая задача! Реализовать нужно что-то вроде excel'я. Чтоб удалить выбранный строку/столбец или добавить после выделенного строку/столбец.
Я так понял нужно использовать chekbox с условиями, но возможно есть другие методы!
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
ksnk
Дата 19.12.2011, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
MagicPRO, Ищи плагин - "контекстное меню". Их дофига, если покопаться в плагинах jQuery. Вставить несколько строк в меню - удалить, добавить строку и т.д.
Можно отдельное менюшко с кнопками использовать сверху таблицы. Соответственно, клик по строке "выделяет" её, кнопка "удалить" удаляет выделенное...
Вообще - Excel - образец функциональности, привычной и интуитивно понятной простому народу. Если копировать внешность Excel - нужно скопировать и поведение? чтобы народ не вводился в недоумение...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MagicPRO
Дата 27.12.2011, 23:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
У меня тут такая мысль пришла, вот только можно ли так. Если выделять ячейку при наведении и считывать её местонахождение(индекс), а затем идти при помощи правой кнопки -> контекстное меню -> добавить столбец,удалить столбец,удалить строку,добавить строку.
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
ksnk
Дата 28.12.2011, 00:45 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Код

// выделить ячейку таблицы
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){ 
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
})

// удалить строку
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
})

//удалить столбец
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        })
    }
}) 

// добавить столбец после
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        })
    }
})    

// добавить строку после
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
})      

http://jsfiddle.net/QhL9E/


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MagicPRO
Дата 28.12.2011, 21:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
ksnk, спасибо вам огромное,   разобрал ваш пример! очень хороший метод!

Кстати прописал его в html, стиль работает а jquery нет(

Код

<html>
    <head>
    <style> 
A:active{
    color:white;
    background:red;
}
#table td {
    width:50px;
 border: 3px solid grey;
}
</style>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
})
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
})
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        })
    }
})
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        })
    }
})    
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
})        
</script>
<button id='delrow'>delrow</button>
<button id='delcell'>delcell</button>
<button id='addcell'>addcell</button>
<button id='addrow'>addrow</button>

<table id="table">
    <tr>      <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
    </tr>
    <tr>      <td>2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>3</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>6</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>8</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>9</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>10</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>11</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>12</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>13</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
        
</table>

    </body>
</html>

--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
ksnk
Дата 28.12.2011, 22:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
MagicPRO, Для начала - нужно ТОЧНО скопировать css правила. Потом понять, зачем нужно 4 раза подгружать jQuery. Убрать лишние разы.

Jacascript, который использует jQuery, как правило,  вызывается при загрузке страницы. Для этого он заключается в такую конструкцию
Код

$(function(){
  $(...
...

})



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MagicPRO
Дата 28.12.2011, 23:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
да получилось, расставил синтаксис и т.д., но одна функция странно работает добавляет столбец с активными ячейками но без границ, просто пустота но можно выделить ячейку.
Код

<html>
    <head>
    <style> 
.active{
    color:white;
    background:blue;
}
#table td {
    width:30px;
 border: 1px solid black;
}
</style>
    </head>
    <body>
      
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript">
$(function(){
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
});
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
});
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        });
    }
});
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        });
    }
}); 
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
}); 
});      
</script>
<button id='delrow'>Удалить строку</button>
<button id='delcell'>Удалить столбец</button>
<button id='addcell'>Добавить столбец</button>
<button id='addrow'>Добавить строку</button>

<table id="table">
    <tr>      <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
    </tr>
    <tr>      <td>2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>3</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>6</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>8</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>9</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>10</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>11</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>12</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>13</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
        
</table>

    </body>
</html>



--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
ksnk
Дата 29.12.2011, 00:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Цитата(MagicPRO @  28.12.2011,  23:39 Найти цитируемый пост)
 одна функция странно работает

Что за функция, в каком броузере, как воспроизвести?
В моем хроме все в порядке.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MagicPRO
Дата 29.12.2011, 00:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
функция #addcell, в ИЕ 8 и мозиле одна и таже проблема, столбец добавляет но нет границ ячеек
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
ksnk
Дата 29.12.2011, 01:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
содержимое не копируется. 
Тогда так:
Код

$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $myTd=$('td',this).eq(cnt);
            $myTd.after($myTd.clone());
        });
    }
}); 



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
MagicPRO
Дата 30.12.2011, 12:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
да..теперь работает. спасибо!!а вообще странный случай что не прорисовывает границы ячеек....
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
MagicPRO
Дата 3.1.2012, 15:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
а в этом случае можно добавить функцию ввода текста в ячейку? например .dblclick() или вместо выделения просто .click() что сохранились функции изменения таблицы?
--------------------
 smile=iwashere 
PM MAIL ICQ Skype   Вверх
Страницы: (4) Все 1 [2] 3 4 
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0881 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.