Сделал таблицу при помощи 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">mymail@gmail.com</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(т.к. это древний метод)))) |
.