Javascript-форум - Заполнение и проверка ячеек таблицы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Заполнение и проверка ячеек таблицы (https://javascript.ru/forum/jquery/65236-zapolnenie-i-proverka-yacheek-tablicy.html)

Заполнение и проверка ячеек таблицы

Строится след динамическая таблица (размерность 4xn). Ячейки таблицы заполняются от 0 до n (n- число из inputа с id="cols").
Необходимо чтобы 2 строка заполнялась от 0 до n как сейчас, а 4 строка по формуле

, где p=0,5;q=0,5;n=число из inputа с id="cols", k=номер ячейки в таблице.

Код:

(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) {
					alert('Некорректные значения!');
					return false;
				}
				for (var i = 0; i < opts.row; i++) {

					table.append(methods.makeRow(i));
				}
				alert('Введите значения СВ и соответствующие им вероятности');
				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) {
				return ['X', 'P'][i]
			}
		};
		$.fn.duplicate = function (count) {
			var tmp = [];
			for (var i = 0; i < count; i++) {
				if (this[0].tagName === 'TD') {

					//this.html('&nbsp;')
						 this.html(i)
					// 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: parseInt($('#cols', this).val())+1,
				add: 'html'
			}).find("tr:odd ")
			.each(function (indx, tr) {
				var minMax = [7, 1];
				$('td', tr).click(function () {
					var text = $(this).text(),
						varX = $("<input/>", {
							"value": text,
							"click": function (event) {
								event.stopPropagation()
							},
							"blur": function () {
								var val = +this.value || 0 ;
								if (val < 0 || val > minMax[indx] ) {
									alert("Диапазон от 0 до 7 ");
									val = text;
								};
				 				$(this).parent().html(val)
							}
						});
					$(this).html(varX);
					varX.setCursorPosition(text.length)

				});
			});
	});
});

Как вообще разделить процесс заполнения строк таблицы?

MrSmitt,
Ты же можешь в своем makeRow сделать проверку на === 4 и в таком случае заполнять строку по другому правилу

и если у тебя p === q то в схеме бернулли можно(логично) оставить p c показателем "n"

Не понял насчёт makeRow, которые фактически участвует в заполнении 0 и 2 строк таблицы заголовками-буквами.
В моём понимании , нужно изменить часть кода

for (var i = 0; i < count; i++) {
				if (this[0].tagName === 'TD') {
						 this.html(i)
				}
				$.merge(tmp, this.clone().get());
			}

(в котором идёт заполнение по числу колонок count), так чтобы проверялась строка "tr:odd:first"

Rise,

MrSmitt,
Ну вот же у тебя есть

for (var i = 0; i < opts.row; i++) {

					table.append(methods.makeRow(i));
				}

и opts.row у тебя == 2
Ты в цикле передаешь индекс i в метод makeRow
Что тебе мешает проверить этот индекс на === 4 (или сколько тебе там надо) прежде чем делать return

Rise,
Хотел делать проверки в makeRow (if i===0) и (if i===1) и соответственно возвращать условно говоря duplicate или ново написанный duplicate2 , но Ваш вариант оказался более лаконичен.

Что касается формулы, можно ли написать функцию для вычисления факториала

$.fn.factorial=function(i){
            if(i==0 || i==1) 
            	{return 1;}
            else {
            	return(i*factorial(i-1));
            }
        };

и как его следует вызвать здесь?

this.html(/* по формуле */);

factorial jquery

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.factorial = function(m_x) {
        function f_Factorial(m_x) {
            if (m_x == 0 || m_x == 1) return 1;
            else return m_x * f_Factorial(m_x - 1)
        }
        var Factorial = f_Factorial(m_x);
        return this.length ? $(this).text(Factorial) : Factorial
    };
    $("div").factorial(5).css({
        color: "#FF0000"
    });
    $("p").text($.fn.factorial(4)).css({
        color: "#FF00FF"
    })
});
  </script>
</head>

<body>
<div></div>
<div></div>
<p></p>
<p></p>
</body>
</html>

рони,
благодарю, а не могли бы разъяснить 19 строку?
Rise,
такой вызов в купе с факториалом из поста #9 не сработал,поэтому и задал вопрос.
А вот так получилось

this.html($.fn.factorial(i));

Цитата:

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

благодарю, а в чём суть 19 строки?

вернуть обьекты если они были (для продолжения цепочки, строка 21 как пример)или число(строка 24)

Цитата:

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

А вот так получилось
this.html($.fn.factorial(i));

тогда можно

this.factorial(i)

рони,
Спасибо за пояснения, не учёл, что обычного return (15, 16 строка) недостаточно и нужно выйти из "цикла" (14).

А как следует проверять значения в ячейках? Т.е. то, что допустим в 4 ряду во 2й ячейке именно то значение, которое посчиталось в $.fn.duplicate = function (count, row) иначе alert?

Цитата:

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

А как следует проверять значения в ячейках?

если вопрос ко мне, я пас.

Rise,

Ну вот к примеру 9 строка кода заполняет/высчитывает P0,P1 и т.д. Необходимо, если юзер попытается ввести значение в ячейку таблицы не совпадающее со значением, которое до него высчитала и записала функция (9 строка) вывести ошибку.

$.fn.duplicate = function (count, row) {
			var tmp = [];
            var n=parseInt($("#cols").val());
			for (var i = 0; i < count; i++) {
				if (this[0].tagName === 'TD') {
                        if (row % 2) 
                        {

                            this.html(Math.pow(0.5,n)*($.fn.factorial(n)/($.fn.factorial(i)*$.fn.factorial(n-i))));
                        } 
                        else {
     
                               this.html(i);
                        }
				}
				$.merge(tmp, this.clone().get());
			}
			return this.pushStack(tmp);
		};
        $.fn.factorial=function(i){
        	function f_Factorial(i){
                if (i==0 || i==1) return 1;
                else return i*f_Factorial(i-1);
              }
             var Factorial=f_Factorial(i);
             return this.length ? $(this).text(Factorial):Factorial           
        };

UPD: ещё пример + пробная реализация, пользователь захочет в X0 записать не 0, а другую цифру. Программа должна выдать ошибку, что в X0 всегда 0 и т.д.

var hasEmpty= false;

        $('output tr:odd:eq(0) td:eq(0)').each(function(i){
          if($(this).html() != 0){
             alert("Введено не верно !");
             hasEmpty= true;
             return false;
           };
        })

Rise,
Логики искать не приходится,это своего рода тз полное абсурда. Пользователь может вводить текст в ячейки (как возможность), но в тоже время если он их изменит, то формула которая считает по значениям из таблицы посчитает неправильно.

Ещё возник вопрос гораздо более логичный, можно ли заставить программу работать как с числами с запятой, так и с точкой (в текущ ситуации он числа с запятой зануляет)? Или нужно заменять запятую на точку (опять же как?)?

Rise,
Не могу понять где следует парсить текст , а не заменять запятую на точку.

$('form').on('submit', function (e) {
        e.preventDefault();
        $('output').generateTable({
                cols: parseInt($('#cols', this).val())+1,
                add: 'html'
            }).find("tr:odd ")
            .each(function (indx, tr) {
                var minMax = [7, 1];
                $('td', tr).click(function () {
                    var text = $(this).text(),
                        varX = $("<input/>", {
                            "value": text,
                            "click": function (event) {
                                event.stopPropagation()
                            },
                            "blur": function () {
                                var val = +this.value || 0 ;
                                if (val < 0 || val > minMax[indx] ) {
                                    alert("Диапазон от 0 до 7 ");
                                    val = text;
                                };
                                $(this).parent().html(val)
                            }
                        });
                    $(this).html(varX);
                    varX.setCursorPosition(text.length)
 
                });
            });
    });

Rise,
Решил,дать возможность вводить запятую (не меняя на точку). Написал parseFloat в 4 строке. Получаю 0 при вводе запятой.
Изменил непонятную строку 17 на

var val = +this.value

получил NaN

UPD: не менял parseInt. Строку #17 поменял на

var val =parseFloatExt(this.value) ;

и получил замену запятой на точку.

Rise,
а что всё таки делает строка ?
var val = + this.value || 0 ;