Редактирование таблицы при помощи Jquery

 
0
 
JavaScript
ava
MagicPRO | 29.11.2011, 18:03
Необходимо сделать форму с таблицей:
размер можно менять отдельными командными ( добавить строку (в конце), удалить строку(текущую), добавить столбец(в конце))
сделать 2 клавиши добавление и удаление.
первоначальный размер таблицы 2х2.
Как лучше сделать, до этого вечно конфликт строки со столбцом был.
Kommentare (46)
ava
Evghenusi | 29.11.2011, 18:04 #
делал подобное на чистом JS, и конфликтов не было.
можете его описать?
ava
MagicPRO | 29.11.2011, 18:35 #
я сделал тоже на чистом яве...но сказали переделать на jquery.а я с ним не особо дружу. Может у кого есть примеры на Jquery, обшарил интернет подобного чето не нашел.
ava
$дмитрий | 29.11.2011, 18:38 #
Для копировании строки достаточно посчитать количество td, затем в переменной сформировать всю строку и вставить результат, еще можно клонировать строку целиком и почистив содержимое td, вставить в таблицу
Для копировании столбца просто вставляем последним элементом новый td по всех tr
ava
MagicPRO | 29.11.2011, 18:53 #
а при удалении??
ava
$дмитрий | 29.11.2011, 19:01 #
Для удалении последней строки используй метод remove(), примерно так:

$('tr:last-child').remove();
ava
MagicPRO | 02.12.2011, 00:58 #
Сделал таблицу при помощи grid. Смог реализовать удаление/добавление строки только.

<HTML>
<HEAD>
<TITLE>ТЕХНТРОН </Title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.grid.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#myTable').grid();
});
</script>
<style type="text/css">
* {font-size: 12px; font-family:Arial;}
td {text-align: center;}
td .gridEdit {border:7px solid #555555; text-align: center; width:100%; border:none; background-color:#E0E9EF;}
tr.editMode td {background-color:#FF7F7F;}

#wrapper {margin:0 auto; width:99%;}
#myTable {border:10px solid #eeeeee; width:99%;}
#myTable th {background-color:#aaccee;}
</style>
</HEAD>

<BODY>

<div id="wrapper">
<div id="myTable">
<div style="padding: 3px">
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Delete" />
</div>
<table cellspacing="0" cellpadding="1" style="width:100%">
<tbody>
<tr id="row_1">
<th><input type="checkbox" name="selAll" class="selAll" value="1" /></th>
<th>Заказчик</th>
<th>E-mail</th>
<th>Отзыв</th>
</tr>
<tr id="row_2">
<td><input type="checkbox" name="items[]" class="items" value="2" /></td>
<td class="txt">НПЗ</td>
<td class="txt">[email protected]</td>
<td class="sel">
<span>Положительный</span>
<select style="display: none;">
<option value="0"></option>
<option value="1">Положительный</option>
<option value="2">Нейтральный</option>
<option value="3">Отрицательный</option>
<option value="4">Нет отзыва</option>
</select>
<input type="hidden" value="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</BODY>
</HTML>


А вот собственно jquery
;(function($){
$.fn.grid = function(options) {

var curText = '';

$.fn.grid.defaults = {
msgConfirmDelete: 'Вы уверены что хотите удалить отзыв?',
msgNoSelectedItems: 'Вы не выбрали ни один пункт',
rowColorOdd: '#eeeeef',
rowColorEven: '#ffffff',
rowColorOn: '#FFAC7F',
rowColorOff: '',
rowColorEdit: '#FF7F7F',
};
var options = jQuery.extend({}, $.fn.grid.defaults, options);

_grid = this;
var $this = null;

function deleteRows(){
var boxes = $this.find('input:checkbox.items:checked');
if(!boxes.length){
alert(options.msgNoSelectedItems);
return false;
}
if(!confirm(options.msgConfirmDelete)){
return false;
}
for(var i=0; i<boxes.length; i++){
$('#row_' + boxes[i].value).fadeTo(5000, 1).remove();
}
refreshZebra();
}

function addRow(){
var tpl = $this.find('tr:last').clone();
var newId = parseId(tpl.attr('id')) + 1;

tpl.attr('id', 'row_' + newId);
tpl.find(':checkbox').val(newId);

bindDblClick(tpl.find('td.txt'));
tpl.find('td.txt').find('span').html('');

bindHovers(tpl);
bindLeaveSelect(tpl.find('td.sel select'));
$this.find('table').append(tpl);

refreshZebra();
}

function parseId(mixedId){
var arrId = mixedId.split('_');
return parseInt(arrId[1], 10);
}

function saveAll(){

}
function editTxt(td){
var span = td.find('span');
curText = span.html();

td.css('width', td.css('width'));
td.css('height', td.css('height'));

var parentRow = td.parent();
parentRow.css('background-color', options.rowColorOff).addClass('editMode');

span.hide();

if(td.hasClass('txt')){
var inp = td.find('input');
if(!inp.length){
inp = $('<input type="text" value="' + curText + '" class="gridEdit" />');
td.append(inp);
inp.keypress(function(e){
bindLeaveEdit(inp, e);
}).blur(function(e){ bindLeaveEdit(inp, e); });
} else {
inp.val(curText);
inp.show();
}
} else if (td.hasClass('sel')) {
var inp = td.find('select');
var val = td.find('input:hidden').val();

inp.find('option[value="' + val + '"]').attr('selected', 'selected');
inp.show();

}
inp.focus();
}
function bindLeaveEdit(edit, ev){
ev.cancelBubble = true;
var span = edit.prev('span');

if(ev == undefined){
edit.hide();
span.show();
edit.parent().parent().removeClass('editMode');
}
var keyCode = ev.keyCode ? ev.keyCode : ev.which;
if(keyCode == 13){
if(edit.parent().hasClass('txt')){
span.html(edit.val()+'');
} else if (edit.parent().hasClass('sel')){
span.html(edit.find(':selected').html()+'');
}
exitEditMode(edit, span);
} else if(keyCode == 27 || keyCode == undefined){
exitEditMode(edit, span);
} else if(keyCode == 9){
span.html(edit.val()+'');
exitEditMode(edit, span);

var nextTd = edit.parent().next('td');
nextTd.trigger('dblclick');
}
refreshZebra();
}

function exitEditMode(edit, span){
edit.hide();
span.show();
edit.parent().parent().removeClass('editMode');
}

function bindLeaveSelect(select){
select.change(function(){
var _sel = $(this);
var span = _sel.prev('span');
span.html(_sel.find(':selected').html()+'');
_sel.next('input:hidden').val(_sel.find(':selected').val());

span.show();
_sel.hide();
_sel.parent().parent().removeClass('editMode');
});
refreshZebra();
}

function refreshZebra(){
$this.find('tr:odd').css('background-color', options.rowColorOdd);
$this.find('tr:even').css('background-color', options.rowColorEven);
}

function bindHovers(jqRowObj){
jqRowObj.mouseover(function(){
var row = $(this);
options.rowColorOff = row.css('background-color');
if(!row.hasClass('editMode')){
row.css('background-color', options.rowColorOn);
} else {
row.css('background-color', options.rowColorEdit);
}
})
.mouseout(function(){
if(!$(this).hasClass('editMode')){
$(this).css('background-color', options.rowColorOff);
}
})
;
}

function bindDblClick(jqCell){
jqCell.dblclick(function(){
if(!$(this).parent().hasClass('editMode')){
editTxt($(this));
}
});
}

return this.each(function() {
$this = $(this);

$this.find('td.txt').wrapInner('<span></span>');
bindHovers($this.find('tr'));

refreshZebra();

$this.find('input:checkbox.selAll').click(function(){
if(this.checked){
$this.find('input:checkbox.items').attr('checked', 'checked');
} else {
$this.find('input:checkbox.items').removeAttr('checked');
}
});

$this.find('.btnDel').click(function(){
deleteRows();
});

$this.find('.btnAdd').click(function(){
addRow();
});

$this.find('.btnSend').click(function(){
saveAll();
});

bindDblClick($this.find('td.txt, td.sel'));

bindLeaveSelect($this.find('td.sel select'));

});
};
})(jQuery);


P.S. сказали убрать метод for(т.к. это древний метод))))
ava
MagicPRO | 08.12.2011, 00:26 #
Вот пытался построить при помощи этого сайта
но ничего не получается,подскажите в чем ошибка((
ava
&#036;дмитрий | 08.12.2011, 09:56 #
Цитата


но ничего не получается,подскажите в чем ошибка


Как минимум в этой записи

tr:lasttd
ava
MagicPRO | 09.12.2011, 00:44 #
Пардон, пост писал под шафэ).....в общем проведённый день прошел не зря! Перечитал кучу инфы по jQuery. И вот что получилось таблица !
Осталось 2 нерешенные задачи: 1 - Удаление столбца и 2 - Добавление строки длиною всей таблицы(в зависимости от количества столбцов)
ava
&#036;дмитрий | 09.12.2011, 05:46 #
Вместо

$("tr","#myTable")

Правильнее

$("#myTable tr")

ava
MagicPRO | 10.12.2011, 19:58 #
Со строкой разобрался, а как удалить столбцы(((((
ava
&#036;дмитрий | 11.12.2011, 07:38 #
Цитата


Со строкой разобрался, а как удалить столбцы


С помощью each перебрать все tr, и применить на каждой итерации

$('td:last', this).remove();
ava
MagicPRO | 12.12.2011, 23:23 #
Метод удаление столбца, но все равно как-то удаляет криво! http://jsfiddle.net/magicpro/hSuWr/24/
ava
&#036;дмитрий | 13.12.2011, 09:49 #
Перечитай внимательно что написал
Цитата


С помощью each перебрать все tr, и применить на каждой итерации


Где цикл each? Не вижу
ava
MagicPRO | 15.12.2011, 13:05 #
проблема с each, в паре нужно использовать цикл for, а мне нужно без for. как поступить?!
ava
&#036;дмитрий | 15.12.2011, 13:57 #
Цитата


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


Покажи пример с кодом, где там проблема с циклом
ava
MagicPRO | 16.12.2011, 02:20 #
Все получилось. each был заменен на clone. Может не самый лучший вариант, но на данную задачу пойдет!
Рабочий вариант
Спасибо всем за помощь!
ava
MagicPRO | 19.12.2011, 16:15 #
Теперь новая задача! Реализовать нужно что-то вроде excel'я. Чтоб удалить выбранный строку/столбец или добавить после выделенного строку/столбец.
Я так понял нужно использовать chekbox с условиями, но возможно есть другие методы!
ava
ksnk | 19.12.2011, 16:22 #
MagicPRO, Ищи плагин - "контекстное меню". Их дофига, если покопаться в плагинах jQuery. Вставить несколько строк в меню - удалить, добавить строку и т.д.
Можно отдельное менюшко с кнопками использовать сверху таблицы. Соответственно, клик по строке "выделяет" её, кнопка "удалить" удаляет выделенное...
Вообще - Excel - образец функциональности, привычной и интуитивно понятной простому народу. Если копировать внешность Excel - нужно скопировать и поведение? чтобы народ не вводился в недоумение...
ava
MagicPRO | 27.12.2011, 23:57 #
У меня тут такая мысль пришла, вот только можно ли так. Если выделять ячейку при наведении и считывать её местонахождение(индекс), а затем идти при помощи правой кнопки -> контекстное меню -> добавить столбец,удалить столбец,удалить строку,добавить строку.
ava
ksnk | 28.12.2011, 00:45 #

// выделить ячейку таблицы
$('#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/
ava
MagicPRO | 28.12.2011, 21:01 #
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>
ava
ksnk | 28.12.2011, 22:41 #
MagicPRO, Для начала - нужно ТОЧНО скопировать css правила. Потом понять, зачем нужно 4 раза подгружать jQuery. Убрать лишние разы.

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

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

})
ava
MagicPRO | 28.12.2011, 23:39 #
да получилось, расставил синтаксис и т.д., но одна функция странно работает добавляет столбец с активными ячейками но без границ, просто пустота но можно выделить ячейку.

<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>


ava
ksnk | 29.12.2011, 00:22 #
Цитата (MagicPRO @ 28.12.2011, 23:39 findReferencedText)
одна функция странно работает

Что за функция, в каком броузере, как воспроизвести?
В моем хроме все в порядке.
ava
MagicPRO | 29.12.2011, 00:26 #
функция #addcell, в ИЕ 8 и мозиле одна и таже проблема, столбец добавляет но нет границ ячеек
ava
ksnk | 29.12.2011, 01:14 #
содержимое не копируется.
Тогда так:

$('#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());
});
}
});
ava
MagicPRO | 30.12.2011, 12:41 #
да..теперь работает. спасибо!!а вообще странный случай что не прорисовывает границы ячеек....
ava
MagicPRO | 03.01.2012, 15:52 #
а в этом случае можно добавить функцию ввода текста в ячейку? например .dblclick() или вместо выделения просто .click() что сохранились функции изменения таблицы?
ava
ksnk | 03.01.2012, 16:40 #
Функции изменения таблицы никак не завязаны на содержимое таблицы. Все функции изменения таблицы используют специально отмеченную ячейку. Каким образом ее помечать - личное дело приложения, для простоты у меня меняется класс ячейки

var $cell=$('#table td.active');

если есть надобность использовать другой способ отметки ячейки - нужно менять/заменить эти строки + функцию

// выделить ячейку таблицы
$('#table').click(function(event) ...


Цитата (MagicPRO @ 3.1.2012, 15:52 findReferencedText)
можно добавить функцию ввода текста в ячейку? например .dblclick() или вместо выделения просто .click() что сохранились функции изменения таблицы?

Можно.
ava
MagicPRO | 04.01.2012, 10:48 #
Можно но вопрос как)).....прочитав документацию сделал вывод что это для каждой ячейки надо делать input text?
ava
MagicPRO | 05.01.2012, 14:39 #
ksnk,этот фрагмент когда делает активную ячейку в связи с которой потом форматируется таблица, а если её оставить активной но добавить возможность вводить текст.
$(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');
}
ava
MagicPRO | 05.01.2012, 14:39 #
ksnk,этот фрагмент когда делает активную ячейку в связи с которой потом форматируется таблица, а если её оставить активной но добавить возможность вводить текст.
$(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');
}
ava
ksnk | 05.01.2012, 15:24 #
Цитата (MagicPRO @ 5.1.2012, 14:39 findReferencedText)
а если её оставить активной но добавить возможность вводить текст.

Ну и что мешает? Вверху - отдельное поле ввода, в которое при "активации" копируется содержимое ячейки, а при нажатии на ввод это содержимое вставляется обратно и обнуляется?
Или каким-нибудь диалогом запрашиваем содержимое.
Или просто инпут "подравниваем" до границ ячейки и абсолютным позиционированием размещаем над ячейкой. По onblur содержимое ячейки вбрасывается в ячейку.

Что делалось и что не получается?
ava
MagicPRO | 06.01.2012, 00:38 #
про onblur, впервые слышу, надо почитать. просто т.к. идея "аля" excel, то полей за пределами таблицы быть не должно.
ava
MagicPRO | 12.01.2012, 21:31 #
ksnk, а можете сделать какие то наброски, как реализовать 3й вариант предложенный Вами. Я перечитал куча статей и никак не сведу мысли до кучи как это реализовать(
ava
ksnk | 13.01.2012, 01:47 #
Цитата (MagicPRO @ 12.1.2012, 21:31 findReferencedText)
какие то наброски...

Выдернул из своего проекта редактор, немножко с корнями... Пришлось срочно дописывать комментарии и тестовую страничку. Как-то не планировалось оформлять его как посторонний плагин, но вроде не так уж и плохо выглядит.

Если будут какие-то глюки - нужно докладывать.

Проверялся на IE9 , хроме и FF.

P.S. сейчас работает и на IE6-9
ava
MagicPRO | 15.01.2012, 13:45 #
спасибо за материал, только не работают стрелки почему то(

п.с. все таки как добавить возможность вводить текст к тому примеру что Вы писали с активной ячейкой
ava
ksnk | 15.01.2012, 19:42 #
Цитата (MagicPRO @ 15.1.2012, 13:45 findReferencedText)
спасибо за материал, только не работают стрелки почему то(

На моей тестовой страничке работают? В самой нижней таблице?
Где и как не работают?
ava
MagicPRO | 15.01.2012, 23:23 #
все заработал.....у меня есть идея попробую реализовать под свой код!

а для чего нужен файл editcell.js? editcell.min.js - описывает редактирование?
ava
ksnk | 16.01.2012, 08:33 #
editcell.min.js- сжатый YUCompressor'ом editcell.js
ava
MagicPRO | 19.01.2012, 20:18 #
Исходя из кода который был, нужно было дописать. Библиотечку "editcell" заброковали. Пришлось использовать textarea и получился вот такой вариант Вариант, но теперь нужно без кнопок. Тоесть кликаешь на ячейку вводишь текст, кликаешь на другую он сохраняется. С вводом легко, можно убрать кнопку и сделать событие просто по click, а как прописать чтоб автоматически сохранялось?
ava
ksnk | 19.01.2012, 20:29 #
По какой причине забраковали библиотеку?
ava
MagicPRO | 19.01.2012, 23:25 #
библиотекой довольный, но нужен модернизированый этот код что у меня(
ava
ksnk | 20.01.2012, 00:26 #
Ну, флаг в руки. Все правильные буквы уже написаны smile Наковырять оттуда нужные - не очень сложная задача, особенно если понятно зачем оно нужно.
ava
MagicPRO | 26.01.2012, 21:51 #
ksnk, все таки мне понравился ваш пример разобрал и буду испльзовать его дальше, но возникла маленькая проблемка с textarea, при ожидании ввода текста перекрывает границу ячейки.
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden