<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> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>3</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>4</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>5</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>6</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>7</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>8</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>9</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>10</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>11</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>12</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>13</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html> |