javascript - 根据单元格属性阻止表格单元格 - Javascript

Question

我有两张 table 。一种表示月份中的天数 (Dofm_Table)，另一种表示月份 (Month_Table)。对于每个月份单元格，我添加了属性“数据测试”，其中包含该特定月份的天数。

我正在尝试添加一个函数，该函数将 Month_Table 中所选单元格的“data-test”属性与 Dofm_Table 中每个单元格的“value”属性进行比较。用户不应单击 Dofm_table 中“value”属性高于 Month_Table 中所选单元格的“data-val”属性的任何单元格。

例如，如果用户单击 Month_Table 中的 Feb，则他们应该只能单击 Dofm_Table 上的单元格 1-28。

这是我到目前为止所做的事情:

 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();

这是 JSFiddle:https://jsfiddle.net/cr1aL26v/5/

Answer 1

如果您只想禁止选择某一天，您可以在点击特定日期时检查所选月份的限制。这是一个简短的示例

$("#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');
});