CODEWITHSUNDEEP
javascriptjquerydom
MO MI
MO MI

Reputation: 85

Blocking cells of table based on cell attributes - Javascript

I have two tables. One for the days of month(Dofm_Table) and one for the months (Month_Table). With each month cell, I've added the attribute 'data-test' which contains the number of days in that specific month.

I'm trying to add a function which compares the 'data-test' attribute of the selected cell from Month_Table with the 'value' attribute of each cell in Dofm_Table. Any cell in the Dofm_table with a 'value' attribute higher than 'data-val' attribute of the selected cell from the Month_Table should not be able to be clicked by the user.

For example, if the user clicks Feb from Month_Table, they should only be able to click the cells 1-28 on Dofm_Table.

Here is an example of the attributes of each cell in Month_Table

Here is an example of the attribute of each cell in the Dofm_Table

Here is what I've managed to do so far:

 function MonthDofmBlocks() {

        //check if dofm checkboxes has been checked. If so, block the days calender. Vice versa.
        var days = 0;
        var checkboxMonthCells = document.querySelectorAll('#Month_Table td');

        checkboxMonthCells.forEach(c => c.addEventListener('click', event => {

            days = 0;

            for (var i = 0; i < checkboxMonthCells.length; i++) {

                var NofD = parseInt($(checkboxMonthCells[i]).attr('data-test'));

                if (checkboxMonthCells[i].onclick) {
                    if (days < NofD)
                        days = NofD;
                }
            }
            var DofM = $("#Dofm_Table td").each(function (index, value) {
                var day = DofM.attr("value") + 1;

            });


        }));

    }
    MonthDofmBlocks();

Here is the JSFiddle: https://jsfiddle.net/cr1aL26v/5/

Upvotes: 0

Views: 78

Answers (1)

Nick Wyman
Nick Wyman

Reputation: 1158

If you just want to suppress the ability to select a day, you can check for the selected month's limit when they click on a particular day. Here's a brief example

$("#Dofm_Table td").click(function (event) {
  var valueOfDay = parseInt($(this).attr("value"));

  //All months have at least 28 days, so we can just allow any day below that.
  if (valueOfDay > 27) {
    //find the month cell that is selected and read its value.
    var monthDayLimit = parseInt($("#Dofm_Table td.on").attr("data-test"));

    if (valueOfDay > monthDayLimit) {
        return false;
    }
  }

  $(this).toggleClass('on');
});

Upvotes: 1

Related Questions