Hi I am new to programming and this is my first question in stackoverflow. Please forgive If I have made any mistake while posting this question.
I want to achieve functionality that shown in below HTML tableenter image description here.
If I select more than one cells corresponding to any row I can only select other remaining cells in that row, at the same time I cant select any other cell residing in other row.
Also If I select single cell from a row I can select any other cell from different row. now in this case previous selection will be disabled.
basically I want to restrict multiple row cell selection if I select more than two cells in a row by using shift key randomly.
below is my code to create HTML table.
function buildIPTGrid(iptView) { ////console.log(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");
}
also I need to find the selected cell value is in which month(as shown in table header) and whether it is fixed or basis.
Quick response will be appreciable.
Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire