选择不同的单元格值驻留在动态html表的单行内

Question

您好我是编程新手，这是我在stackoverflow中的第一个问题。 请原谅如果我在发布这个问题时犯了错误。

我想实现下面HTML表格中显示的功能

Output HTML table and selection of values as highlited

如果我选择与任何行对应的多个单元格，我只能选择该行中的其他剩余单元格，同时我无法选择驻留在其他行中的任何其他单元格。

此外，如果我从一行中选择单个单元格，我可以从不同的行中选择任何其他单元格。现在在这种情况下，先前的选择将被禁用。

基本上我想限制多行单元格选择，如果我通过随机使用shift键选择连续两行以上的单元格。

下面是我创建HTML表格的代码。

function buildIPTGrid(iptView) 
{
    var firstValue = '';
    var secondValue = '';

    $("#IPTResults").empty();
    $("#IPTVolumes").empty();

    var pIPTGrid = "";

    var pIPTVolumesGrid = "<ul id='iptRateGrid'>";

    pIPTVolumesGrid = pIPTVolumesGrid + "<li><strong>Rates</strong><br/></li></ul>";
    //var pIPTGrid = "<ul id='iptGrid'></ul>";

   // pIPTGrid = pIPTGrid + "<li><strong>Rates</strong><br/></li>";

    pIPTGrid = "</br>" + pIPTGrid + "<table id='priceTable'><tr><th class='dpTdHeaderData'><span> Type </span></th><th class='dpTdHeaderData'><span> Delivery Type</span></th>";

    $(iptView[0].NymexRates).each(function (index, obj) {
        pIPTGrid = pIPTGrid + "<th class='dpTdHeaderData'><span style='text-align:center;'> " +
            concatMonthYear(iptView[0].NymexRates[index].rateMonth, iptView[0].NymexRates[index].rateYear)
        + "</th></span>";
    });

    pIPTGrid = pIPTGrid + "</tr>";
    pIPTGrid = pIPTGrid + "<tr><th class='dpTdHeaderData'><span></span></td><td><span></span></th>";
    for (var i = 1; i < iptView[0].NymexRates.length + 1; i++) {
        pIPTGrid = pIPTGrid + "<th class='dpTdHeaderData'><span style='text-align:center;'>" +
            i + "</span></th>";
    }

    pIPTGrid = pIPTGrid + "</tr>";
    //index NYMEX
    pIPTGrid = pIPTGrid + "<tr><th class='dpTdHeaderData'><span> NYMEX </span></th><th><span> </span></th>";

    $(iptView[0].NymexRates).each(function (index, obj) {
        pIPTGrid = pIPTGrid + "<td class='dpTdNormal'><span style='text-align:center;'> " +
            iptView[0].NymexRates[index].rateFixed + "</td></span>";
    });
    pIPTGrid = pIPTGrid + "</tr>";

    //END index NYMEX

    //Avg index NYMEX
    pIPTGrid = pIPTGrid + "<tr><th class='dpTdHeaderData'><span>Avg Wt NYMEX </span></th><th><span> </span></th>";

    $(iptView[0].AverageNymexRates).each(function (index, obj) {
        pIPTGrid = pIPTGrid + "<td class='dpTdNormal'><span style='text-align:center;'> " +
            iptView[0].NymexRates[index].rateFixed + "</td></span>";
    });
    pIPTGrid = pIPTGrid + "</tr>";
    //End Avg index NYMEX

    //Firm Type 
    for (var i = 0; i < iptView[0].Rates.length; i++) {

        switch (iptView[0].Rates[i].firmType) {
            case 1:
                firstValue = "1F";
                secondValue = "GC Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "GC Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid =  BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                break;
            case 2:

                firstValue = "4F";
                secondValue = "BT Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "BT Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";
                break;
            case 6:

                firstValue = "2F";
                secondValue = "GC Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "GC Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";
                break;
            case 7:

                firstValue = "5F";
                secondValue = "BT Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "BT Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";
                break;
            case 8:

                firstValue = "3F";
                secondValue = "GC Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "GC Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";
                break;
            case 9:

                firstValue = "6F";
                secondValue = "BT Fixed";
                pIPTGrid = pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateFixed);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";

                firstValue = " ";
                secondValue = "BT Basis";
                pIPTGrid + "<tr>";
                pIPTGrid = BuildHeaderData(pIPTGrid, firstValue, secondValue);

                $(iptView[0].Rates).each(function (index, obj) {
                    if (iptView[0].Rates[index].firmType == 1) {
                        pIPTGrid = BuildIPTPriceData(pIPTGrid, iptView[0].Rates[index].rateBasis);
                    }
                });

                pIPTGrid = pIPTGrid + "</tr>";
                break;

            case 0:
                //Interruptible 
                pIPTGrid = pIPTGrid + "<tr><th class='dpTdHeaderData'><span> Interruptible (CG) </span></th><th><span> </span></th>";

                $(iptView[0].Rates).each(function (index, obj) {
                    pIPTGrid = pIPTGrid + "<td class='`'><span style='text-align:center;'> " +
                        iptView[0].Rates[index].rateFixed + "</td></span>";
                });
                pIPTGrid = pIPTGrid + "</tr>";

                pIPTGrid = pIPTGrid + "<tr><th class='dpTdHeaderData'><span> Basis (CG) </span></th><th><span> </span></th>";

                $(iptView[0].Rates).each(function (index, obj) {
                    pIPTGrid = pIPTGrid + "<td class='dpTdNormal'><span style='text-align:center;'> " +
                        iptView[0].Rates[index].rateBasis + "</td></span>";
                });
                pIPTGrid = pIPTGrid + "</tr>";
                break;
            default:
                break;
        }
        i = i + iptView[0].NymexRates.length;
    }
    //End Firm Type

    //pIPTGrid = pIPTGrid + "</label></li>";

    pIPTGrid = pIPTGrid + "</table></br>";

    $("#IPTVolumes").append(pIPTVolumesGrid);
    $("#IPTResults").append(pIPTGrid);
    $("#IPTVolumes").css("visibility", "visible");
    $("#IPTResults").css("visibility", "visible");
    $("#CreatePGPB").css("visibility", "visible");
}

此外，我需要找到所选单元格值在哪个月（如表格标题所示）以及是固定还是基础。