JavaScript
- 9 ответов
- 0 вопросов
5
Вклад в тег
$(document).ready(function () {
var table = $('table');
var cells = table.find('td');
var firstCorner, secondCorner, val;
function getCellIndex(cell) {
return {
x: $(cell).index(),
y: $(cell).parent().index()
};
}
function getRangeFromCorners(firstCorner, secondCorner, axis) {
var from, to;
if (firstCorner[axis] < secondCorner[axis]) {
from = firstCorner[axis];
to = secondCorner[axis];
}
else {
from = secondCorner[axis];
to = firstCorner[axis];
}
to = ':lt(' + ( to - from + 1 ) + ')';
from = from > 0
? ':gt(' + ( from - 1 ) + ')'
: '';
return from + to;
}
function onSelectEnd() {
cells.off('mouseover.selectRange');
table.find('.selected')
.removeClass('selected')
.html(val);
}
cells.on('mousedown', function () {
firstCorner = getCellIndex(this);
secondCorner = getCellIndex(this);
val = $(this).text();
cells.each(function () {
$(this).data('oldval', $(this).html());
});
cells.on('mouseover.selectRange', function () {
secondCorner = getCellIndex(this);
var rangeX = getRangeFromCorners(firstCorner, secondCorner, 'x');
var rangeY = getRangeFromCorners(firstCorner, secondCorner, 'y');
cells.filter('.selected').each(function () {
$(this).removeClass('selected')
.html($(this).data('oldval'));
});
table.find('tr' + rangeY).each(function () {
$(this).find('td' + rangeX)
.addClass('selected')
.html(val);
});
});
$('body')
.on('mouseup.removeCellListener', function () {
$(this).off('mouseup.removeCellListener');
onSelectEnd();
})
.on('mouseleave.removeCellListener', function () {
$(this).off('mouseleave.removeCellListener');
onSelectEnd();
});
});
});<form method="POST" action="/" id="form">
<label><input type="checkbox" name="svois[]" class="svois" value="7"> Высота</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="8"> Количество</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="9"> Назначение</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="10"> Способ изготовления, метод производства</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="11"> Диаметр</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="12"> Вид обработки</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="13"> Тип покрытия</label><br/>
<label><input type="checkbox" name="svois[]" class="svois" value="14"> Форма</label><br/>
<input type="submit" value="Отправить">
</form>
<script>
$(function(){
var form = $('#form');
form.on('submit', function(e){
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(result)
{
console.log( result );
}
});
});
});
</script><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<img src="#" id="img_load">
<a href="#" name="button1" data-num="1" class="button">кнопка</a>
<a href="#" name="button2" data-num="2" class="button">кнопка</a>
<a href="#" name="button3" data-num="3" class="button">кнопка</a>
<a href="#" name="button4" data-num="4" class="button">кнопка</a>
<div class="results"></div>
<script language="javascript" type="text/javascript">
$('.button').on('click', function(e){
e.preventDefault();
var img = $('#img_load');
var current = $(this);
var buttons = $('.button');
$.ajax({
type: 'POST',
url: 'setings.php',
data: 'btn=' + current.data('num'),
success: function(data){
$('.results').html(data);
buttons.each(function(){
$(this).html( 'Кнопка ' + $(this).data('num') );
});
current.html( 'Кликнули сюда' );
img.attr('src', 'image url');
}
});
});
</script>