I have the code below:
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
x.next().remove();
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
I would like to delete the next cell of the current cell I have called. When the Cell 2 is colspan, the Cell 3 should be removed, but I use .next().remove() is not working. Anyone can help?
This is something you could do.
function colspan() {
var ele = document.getElementById("Cell2");
ele.setAttribute("colspan", 2);
if (ele.nextElementSibling) {
ele.nextElementSibling.remove();
}
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change" />
I think you are mixing jQuery and pure JS..
You should use nextSibling() & removeChild(element) on parent.
have a look here: Remove element by id
The last remove() function was on jquery function. so use jquery library link and call the id with jquery type.
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
$('#Cell2').next().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
Related
I'm not much of a javascript coder, but I'm trying to write something to make my work a little easier...
I have a table of data. The third cell of the table ('offersTable') is a display flag, which will either be 'Y', 'N', or empty. The source for the table is incomplete, which is why sometimes the cell is empty (null).
I'm trying to write a small script that will iterate down through the table, and then set the row to hide if the value if the cell is either 'N' or null. That way, only rows which have a 'Y' remain.
Please can someone help me? I'm going out of my mind trying to work this one out!
Sorry, I should have included my code...
<table id="offersTable">
<tr>
<th onclick="sortTable(0)">Lender</th>
<th onclick="sortTable(1)">Lender Code</th>
<th onclick="sortTable(2)">Display</th>
<th onclick="sortTable(3)">Loan Offered</th>
<th onclick="sortTable(4)">Term Offered</th>
<th onclick="sortTable(5)">Approval Probability</th>
<th onclick="sortTable(6)">APR</th>
<th onclick="sortTable(7)">Monthly Repayment</th>
<th onclick="sortTable(8)">Total Repayable</th>
</tr>
<tr id="lender1">
<td id="lender1Name"><script>document.getElementById("lender1Name").innerHTML = offers[0].lender_name;</script>
</td>
<td id="lender1Code"><script>document.getElementById("lender1Code").innerHTML = offers[0].lender_code;</script>
</td>
<td id="lender1Display"><script>document.getElementById("lender1Display").innerHTML = offers[0].display;</script>
</td>
<td id="lender1Value"><script>document.getElementById("lender1Value").innerHTML = offers[0].loan_offered;</script>
</td>
<td id="lender1Term"><script>document.getElementById("lender1Term").innerHTML = offers[0].term_offered;</script>
</td>
<td id="lender1AppProb"><script>document.getElementById("lender1AppProb").innerHTML = offers[0].approval_probability;</script>
</td>
<td id="lender1APR"><script>document.getElementById("lender1APR").innerHTML = offers[0].apr;</script>
</td>
<td id="lender1MonthlyRepay"><script>document.getElementById("lender1MonthlyRepay").innerHTML = offers[0].monthly_repayment;</script>
</td>
<td id="lender1TotalRepay"><script>document.getElementById("lender1TotalRepay").innerHTML = offers[0].total_repayment;</script>
</td>
</tr>
<tr id="lender2">
<td id="lender2Name"><script>document.getElementById("lender2Name").innerHTML = offers[1].lender_name;</script>
</td>
<td id="lender2Code"><script>document.getElementById("lender2Code").innerHTML = offers[1].lender_code;</script>
</td>
<td id="lender2Display"><script>document.getElementById("lender2Display").innerHTML = offers[1].display;</script>
</td>
<td id="lende2Value"><script>document.getElementById("lender2Value").innerHTML = offers[1].loan_offered;</script>
</td>
<td id="lender2Term"><script>document.getElementById("lender2Term").innerHTML = offers[1].term_offered;</script>
</td>
<td id="lender2AppProb"><script>document.getElementById("lender2AppProb").innerHTML = offers[1].approval_probability;</script>
</td>
<td id="lender2APR"><script>document.getElementById("lender2APR").innerHTML = offers[1].apr;</script>
</td>
<td id="lender2MonthlyRepay"><script>document.getElementById("lender2MonthlyRepay").innerHTML = offers[1].monthly_repayment;</script>
</td>
<td id="lender2TotalRepay"><script>document.getElementById("lender2TotalRepay").innerHTML = offers[1].total_repayment;</script>
</td>
</tr>
<tr id="lender3">
<td id="lender3Name"><script>document.getElementById("lender3Name").innerHTML = offers[2].lender_name;</script>
</td>
<td id="lender3Code"><script>document.getElementById("lender3Code").innerHTML = offers[2].lender_code;</script>
</td>
<td id="lender3Display"><script>document.getElementById("lender3Display").innerHTML = offers[2].display;</script>
</td>
<td id="lender3Value"><script>document.getElementById("lender3Value").innerHTML = offers[2].loan_offered;</script>
</td>
<td id="lender3Term"><script>document.getElementById("lender3Term").innerHTML = offers[2].term_offered;</script>
</td>
<td id="lender3AppProb"><script>document.getElementById("lender3AppProb").innerHTML = offers[2].approval_probability;</script>
</td>
<td id="lender3APR"><script>document.getElementById("lender3APR").innerHTML = offers[2].apr;</script>
</td>
<td id="lender3MonthlyRepay"><script>document.getElementById("lender3MonthlyRepay").innerHTML = offers[2].monthly_repayment;</script>
</td>
<td id="lender3TotalRepay"><script>document.getElementById("lender3TotalRepay").innerHTML = offers[2].total_repayment;</script>
</td>
</tr>
<tr id="lender4">
<td id="lender4Name"><script>document.getElementById("lender4Name").innerHTML = offers[3].lender_name;</script>
</td>
<td id="lender4Code"><script>document.getElementById("lender4Code").innerHTML = offers[3].lender_code;</script>
</td>
<td id="lender4Display"><script>document.getElementById("lender4Display").innerHTML = offers[3].display;</script>
</td>
<td id="lender4Value"><script>document.getElementById("lender4Value").innerHTML = offers[3].loan_offered;</script>
</td>
<td id="lender4Term"><script>document.getElementById("lender4Term").innerHTML = offers[3].term_offered;</script>
</td>
<td id="lender4AppProb"><script>document.getElementById("lender4AppProb").innerHTML = offers[3].approval_probability;</script>
</td>
<td id="lender4APR"><script>document.getElementById("lender4APR").innerHTML = offers[3].apr;</script>
</td>
<td id="lender4MonthlyRepay"><script>document.getElementById("lender4MonthlyRepay").innerHTML = offers[3].monthly_repayment;</script>
</td>
<td id="lender4TotalRepay"><script>document.getElementById("lender4TotalRepay").innerHTML = offers[3].total_repayment;</script>
</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>
I would maybe try css: display: hidden; Also check out this website or research some before posting. https://salesforce.stackexchange.com/questions/122023/hide-html-table-rows-if-outputfield-is-null-or-0 Hope this helps!
without seeing your code is difficult but i know this solution with js:
for (i in document.querySelectorAll('td')) {
if (document.querySelectorAll('td')[i].textContent == 'N' || document.querySelectorAll('td')[i].textContent == 'null' ) {
document.querySelectorAll('td')[i].remove()
}
}
i'm using "remove" only to demonstrate it but you can use style.property...
I went with this option as it worked perfectly, operating in exactly the way that I wanted. Many thanks to René Datenschutz for the solution.
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>
I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen
You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer
Is there a simple way of swapping elements of an html table using javascript?
for instance having a table like this:
<table>
<tr>
<td class = "draggable">
<div class = "droppable">Item 1</div>
</td>
</tr>
<tr>
<td class = "draggable">
<div class = "droppable">Item 2</div>
</td>
</tr>
I want to make it available to swap cells.
Thanks!
I've written a little function to swap elements. Pass as arguments the parent (container of swapping elements), and two numbers (index) of the children elements that you want to be swapped.
var rowsParent = document.getElementById('sortRows');
var cellsParent = document.getElementById('sortCells');
swapElements(rowsParent,0,1);
swapElements(cellsParent,2,0);
function swapElements(parent,elemA,elemB){
//a little of validation
if(!parent||parent.constructor.toString().search('HTML')===-1) return;
var children = parent.children;
if(typeof elemA!=='number' || typeof elemB!=='number' || elemA===elemB || !children[elemA] || !children[elemB]) return;
elemB = elemA<elemB ? elemB--:elemB;
var childNumb = children.length - 1;
var a = parent.removeChild(children[elemA]);
var b = parent.removeChild(children[elemB]);
append(elemB,a);
append(elemA,b);
function append(a,b){
childNumb===a ? parent.appendChild(b) : parent.insertBefore(b,children[a]);
}
}
table, td {
border: solid 1px black;
padding: 3px;
margin: 15px;
}
<table>
<tbody id="sortRows">
<tr>
<td>a 1</td>
<td>a 2</td>
<td>a 3</td>
<td>a 4</td>
<td>a 5</td>
</tr>
<tr id="sortCells">
<td>b 1</td>
<td>b 2</td>
<td>b 3</td>
<td>b 4</td>
<td>b 5</td>
</tr>
<tr>
<td>c 1</td>
<td>c 2</td>
<td>c 3</td>
<td>c 4</td>
<td>c 5</td>
</tr>
<tr>
<td>d 1</td>
<td>d 2</td>
<td>d 3</td>
<td>d 4</td>
<td>d 5</td>
</tr>
<tr>
<td>e 1</td>
<td>e 2</td>
<td>e 3</td>
<td>e 4</td>
<td>e 5</td>
</tr>
</tbody>
</table>
You could do it in the same way you swap contents for any variable:
var child1_HTML = $("table tr:nth-child(1)").html();
$("table tr:nth-child(1)").html($("table tr:nth-child(2)").html());
$("table tr:nth-child(2)").html(child1_HTML);
I have the code below:
function highlight(cell){
cell.style.borderColor = "red";
}
function originalColor(cell){
cell.style.borderColor = "black";
}
td{
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 1</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 2</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 4</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 5</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 7</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 8</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 9</td>
</tr>
</table>
It will highlight the border to red when click, when click to the other cell, it suppose change back to black color, but it doesn't work, I try onmouseup, onmouseover, it doesn't work as what I want.
The technique I'hv tried is using tabindex, it works; but that can highlight one cell, if I try to select 2 cells at the same time, it doesn't work. Anyone can help?
var redNow = 1;
function highlight(cell) {
redNow == 1 ? redNow = 0 : redNow.style.borderColor = "black";
redNow = cell;
cell.style.borderColor = "red";
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);">Cell 1</td>
<td onmousedown="highlight(this);">Cell 2</td>
<td onmousedown="highlight(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 4</td>
<td onmousedown="highlight(this);">Cell 5</td>
<td onmousedown="highlight(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 7</td>
<td onmousedown="highlight(this);">Cell 8</td>
<td onmousedown="highlight(this);">Cell 9</td>
</tr>
</table>
After your clarifying comment, if I understand correctly, you want to highlight a cell when you click it, and remove the highlighting if you choose to by clicking another element. If not, please clarify again. If that's indeed the case though, then the following code will work by traversing up the DOM to the parent table, then iterating through all the cells and taking appropriate action:
function toggleBorderColor(c) {
cells = c.parentElement.parentElement.getElementsByTagName('td');
for (var i in cells) {
var cell = cells.item(i);
cell.style.borderColor = (cell != c) ? "" : "red";
}
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 1</td>
<td onmousedown="toggleBorderColor(this);">Cell 2</td>
<td onmousedown="toggleBorderColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 4</td>
<td onmousedown="toggleBorderColor(this);">Cell 5</td>
<td onmousedown="toggleBorderColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 7</td>
<td onmousedown="toggleBorderColor(this);">Cell 8</td>
<td onmousedown="toggleBorderColor(this);">Cell 9</td>
</tr>
</table>
There will be 6 tabs in html page i.e A,B,C,D,E,F and 2 dropdowns.
Working Behavior is : User will select one value from 2 dropdowns. Then based on value selected, the filtering needs to be applied on html table present in each table.
`
var options = $("#comboB").html();
$("#comboA").change(function(e) {
var text = $("#comboA :selected").text();
alert(text);
$("#comboB").html(options);
$('#comboB :not([value^="' + text + '"])').remove();
});
$("#comboB").change(function(e) {
var text = $("#comboB :selected").text();
alert(text);
var allRows = $("tr");
allRows.hide();
$("tr:contains('" + text + "')").show();
});
<div class="dd">
<select id="comboA">
<option value="">Select Value</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<select id="comboB">
<option value="">Select Value</option>
<option value="A">A 1</option>
<option value="A">A 2</option>
<option value="A">A 3</option>
<option value="B">B 1</option>
<option value="B">B 2</option>
<option value="B">B 3</option>
<option value="B">B 4</option>
<option value="C">C 1</option>
<option value="D">D 1</option>
<option value="D">D 2</option>
<option value="E">E 1</option>
<option value="E">E 2</option>
<option value="E">E 3</option>
<option value="E">E 4</option>
<option value="F">F 1</option>
<option value="F">F 2</option>
<option value="F">F 3</option>
<option value="F">F 4</option>
<option value="F">F 5</option>
<option value="F">F 6</option>
</select>
</div>
<div class="tbdata">
<table id="Fdata" border="1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
<tr>
<td class="A">A 2</td>
<td class="B">B 1</td>
<td class="C">C 2</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 2</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 3</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 4</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 5</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 6</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 2</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 3</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 4</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 5</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 2</td>
<td class="F">F 6</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 2</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 3</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 4</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 5</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 3</td>
<td class="F">F 6</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 2</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 3</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 4</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 2</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 5</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 4</td>
<td class="F">F 6</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 2</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 2</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 2</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 2</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 1</td>
</tr>
<tr>
<td class="A">A 1</td>
<td class="B">B 1</td>
<td class="C">C 1</td>
<td class="D">D 1</td>
<td class="E">E 1</td>
<td class="F">F 4</td>
</tr>
</table>
</div>
Link to code that I have tried so far.
Now I am not sure how to do following things.
1) Assume User has selected any value from dropdown, then i am able to filter html table. If user has selected F then only F columns should be visible. Also only the distinct values should be displayed (There are duplicate values )
2) If i select the first value from 2nd dropdown, then change event is not called due to which filtering is not happening. How to resolve this?
3) I have to create tabs for each Option(A,B,C..) and after selecting dropdown value, and if user goes to A tab, then A column should be displayed. If B tab is selected then B column should be displayed. It should display value based on value selected in dropdown.
I created one html page with navigation tabs, but not sure how to integrate that with this.
You may try this (Example)
var options = $("#comboB").html();
$("#comboA").change(function(e) {
var text = $("#comboA :selected").text();
$("#comboB").html(options);
$('#comboB :not([value^="' + text + '"])').remove();
$("#comboB").prepend($('<option/>', { 'html':'Select Value' }));
$("table#Fdata tr").show().find('td').show();
});
$("#comboB").change(function(e) {
if($(this).find('option:selected').text() == 'Select Value') return;
var text = $("#comboB :selected").text();
$("table#Fdata tr").show().find('td').show();
$("table#Fdata tr").not("tr:contains('" + text + "')").hide();
$("table#Fdata tr:visible > td").not("tr td:contains('" + text + "')").hide();
});
You are filtering (showing) tr so in a tr there may be some td's that contains other than the selected text.