Форум

MrSmitt · #1 (**permalink**) 29.07.2016, 13:15

Строится некоторая таблица. Необходимо при нажатии на ячейку таблицы (там где нули) изменить числовое значение.
В дальнейшем введённые значения понадобятся для построения графика, поэтому не знаю обязателен ли jQuery

Код:

<body>
   <form name="forma">
    <p>Кол-во колонок:
    <input type="number" id="cols" value="3">
    </p>
    <input type="submit" value="Подтвердить">			
   </form>
<output></output>
</body>


$(function(){ 
 (function($) {
    var opts = {
        row: 2,
        col: 2,
        add: 'html'
    };
    var methods = {
        init: function(o) {
            var table = $('<table />');
            opts = $.extend(opts, o);
            if (opts.row <= 0 || opts.col <= 0) {
                return false;
            }
           for (var i = 0; i < opts.row; i++) {
                table.append(methods.makeRow(i));
            }
            this[opts.add](table);
        },
        makeRow: function(i) {
            var L = methods.letter(i);
            return $('<tr />', {
                    html: $('<td />').duplicate(opts.cols )
                }).duplicate(2)
                .first()
                .find('td').each(function(i, el) {
                    $(el).html(L + '<sub>' + i + '</sub>');
                })
                .end()
                .prepend($('<td />', {
                    attr: {
                        rowspan: 2
                    },
                    text: L
                })).end();
        },
        letter: function(i) {
            var start = 88;
            return String.fromCharCode(i > start ? start : start + i);
        }
    };
    $.fn.duplicate = function(count) {
        var tmp = [];
        for (var i = 0; i < count; i++) {
            if (this[0].tagName === 'TD') {
                this.text(0);
            }
            $.merge(tmp, this.clone().get());
        }
        return this.pushStack(tmp);
    };
    $.fn.generateTable = function(o) {
        return methods.init.apply(this, arguments);
    };
}(jQuery));		
$('form').on('submit', function(e) {
    e.preventDefault();
    $('output').generateTable({
        cols: $('#cols', this).val(),
        add: 'html' 
    });
 });
});

рони · #2 (**permalink**) 29.07.2016, 13:33

MrSmitt,
удалить элемент input с сохранением его значения в <td>

Rise · #3 (**permalink**) 29.07.2016, 13:35

Сообщение от MrSmitt

поэтому не знаю обязателен ли jQuery

Убери jQuery и узнаешь...

MrSmitt · #4 (**permalink**) 29.07.2016, 16:41

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

$("td").click(function ()

рони · #5 (**permalink**) 29.07.2016, 17:04

MrSmitt,
создайте таблицу понажимайте на нолики, смотреть внимательно весь код

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
  $.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
    if (elem.setSelectionRange) {
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
    });
    return this;
};



 (function($) {
    var opts = {
        row: 2,
        col: 2,
        add: 'html'
    };
    var methods = {
        init: function(o) {
            var table = $('<table />');
            opts = $.extend(opts, o);
            if (opts.row <= 0 || opts.col <= 0) {
                return false;
            }
           for (var i = 0; i < opts.row; i++) {
                table.append(methods.makeRow(i));
            }
            this[opts.add](table);

        },
        makeRow: function(i) {
            var L = methods.letter(i);
            return $('<tr />', {
                    html: $('<td />').duplicate(opts.cols )
                }).duplicate(2)
                .first()
                .find('td').each(function(i, el) {
                    $(el).html(L + '<sub>' + i + '</sub>');
                })
                .end()
                .prepend($('<td />', {
                    attr: {
                        rowspan: 2
                    },
                    text: L
                })).end();
        },
        letter: function(i) {
            var start = 88;
            return String.fromCharCode(i > start ? start : start + i);
        }
    };
    $.fn.duplicate = function(count) {
        var tmp = [];
        for (var i = 0; i < count; i++) {
            if (this[0].tagName === 'TD') {
                this.text(0)

            }
            $.merge(tmp, this.clone().get());
        }
        return this.pushStack(tmp);
    };
    $.fn.generateTable = function(o) {
        methods.init.apply(this, arguments);
        return this
    };
}(jQuery));
$('form').on('submit', function(e) {
    e.preventDefault();
    $('output').generateTable({
        cols: $('#cols', this).val(),
        add: 'html'
    }).find("tr:odd td")
     .click(function () {
                   var text =  $(this).text(),
                       varX = $("<input/>", {
                       "value": text,
                       "click": function (event) {
                           event.stopPropagation()
                       },
                       "blur": function () {
                           $(this).parent().html(this.value)
                       }
                   });
                   $(this).html(varX);
                   varX.setCursorPosition(text.length)
               });
 });
});

  </script>
</head>

<body>
   <form name="forma">
    <p>Кол-во колонок:
    <input type="number" id="cols" value="3">
    </p>
    <input type="submit" value="Подтвердить">
   </form>
<output></output>
</body>

</html>

MrSmitt · #6 (**permalink**) 02.08.2016, 18:18

Появился вопрос,
Для каждой строки нужны разные ограничения. Например для первой строки значения в каждой из ячеек это число от 0 до 10. Для второй строки значение ячейки от 0 до 1, а сумма ячеек второго ряда должна быть =1.

Сумму нахожу так, вот только условие не срабатывает (хотя сумму считает верно).

$("#start").on('click',function(){ 
	    var s=0;
	    var kol=$('tr').length-1;
	    $('tr:odd:last').each(function(){
		    var mn=$(this).find('td');
		    for (var i=0;i<kol;i++){
				s+=(+mn.eq(i).text());
	            }
            if (s>=1 || s<=1)
	        {  
			 alert('сумма ряда не равна единице');
                 }
	     });
});

рони · #7 (**permalink**) 02.08.2016, 18:51

MrSmitt,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
  $.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
    if (elem.setSelectionRange) {
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
    });
    return this;
};



 (function($) {
    var opts = {
        row: 2,
        col: 2,
        add: 'html'
    };
    var methods = {
        init: function(o) {
            var table = $('<table />');
            opts = $.extend(opts, o);
            if (opts.row <= 0 || opts.col <= 0) {
                return false;
            }
           for (var i = 0; i < opts.row; i++) {
                table.append(methods.makeRow(i));
            }
            this[opts.add](table);

        },
        makeRow: function(i) {
            var L = methods.letter(i);
            return $('<tr />', {
                    html: $('<td />').duplicate(opts.cols )
                }).duplicate(2)
                .first()
                .find('td').each(function(i, el) {
                    $(el).html(L + '<sub>' + i + '</sub>');
                })
                .end()
                .prepend($('<td />', {
                    attr: {
                        rowspan: 2
                    },
                    text: L
                })).end();
        },
        letter: function(i) {
            var start = 88;
            return String.fromCharCode(i > start ? start : start + i);
        }
    };
    $.fn.duplicate = function(count) {
        var tmp = [];
        for (var i = 0; i < count; i++) {
            if (this[0].tagName === 'TD') {
                this.text(0)

            }
            $.merge(tmp, this.clone().get());
        }
        return this.pushStack(tmp);
    };
    $.fn.generateTable = function(o) {
        methods.init.apply(this, arguments);
        return this
    };
}(jQuery));
$('form').on('submit', function(e) {
    e.preventDefault();
    $('output').generateTable({
        cols: $('#cols', this).val(),
        add: 'html'
    }).find("tr:odd td")
     .click(function () {
                   var text =  $(this).text(),
                       varX = $("<input/>", {
                       "value": text,
                       "click": function (event) {
                           event.stopPropagation()
                       },
                       "blur": function () {
                           $(this).parent().html(this.value)
                       }
                   });
                   $(this).html(varX);
                   varX.setCursorPosition(text.length)
               });
 });

$("#go").on('click',function(){
	    var s=0;
	    $('output tr:odd:last td').each(function(i,td){
				s+=(+$(td).text()*100);
	     });
        if (s !=100)
	        {
			 alert('сумма ряда не равна единице');
            }

});






});

  </script>
</head>

<body>
   <form name="forma">
    <p>Кол-во колонок:
    <input type="number" id="cols" value="3">
    </p>

    <input type="submit" value="Подтвердить">
   </form>
<output></output>
<input id="go" name="" type="button" value="start">
</body>

</html>

MrSmitt · #8 (**permalink**) 02.08.2016, 19:55

А как можно осуществить эту проверку?

Сообщение от MrSmitt

Например для первой строки значения в каждой из ячеек это число от 0 до 10. Для второй строки значение ячейки от 0 до 1

рони · #9 (**permalink**) 02.08.2016, 20:16

MrSmitt,
что должно быть результатом проверки?

MrSmitt · #10 (**permalink**) 02.08.2016, 20:58

В случае, если хоть одна из ячеек не удовлетворяет заданным условиям, вывод сообщения и возврат к исходным значениям таблицы

if (this[0].tagName === 'TD'){
 this.html('&nbsp;')  //в моём случае таблица изначально пустая
 }

Форум

Справочник

Discord чат

Курсы javascript