Moving specific tr's into a specific td with javascript - javascript

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

Related

localstorage setitem for every block in <table>

I have this contenteditable table on my website.
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>
I want to save every block with id on localstorage. I know I can use localStorage.setItem("p1d1", $('#p1d1').text()); to save these, but is there a better way to save all of these blocks without going like
localStorage.setItem("p1d1", $('#p1d1').text());
localStorage.setItem("p2d1", $('#p2d1').text());
localStorage.setItem("p3d1", $('#p3d1').text());
through the whole thing? I need to call each of them by their id later on.
Thank you.

You can use document.querySelectorAll('td[id^=p]') to select all the td that has id that startsWith p.
const tds = Array.from(document.querySelectorAll('td[id^=p]'));
tds.forEach(td => {
const id = td.id;
const text = td.innerText;
console.log(id, text);
})
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1>text of p1d1</td>
<td id="p1d2" tabindex=2>text of p1d2</td>
<td id="p1d3" tabindex=3>text of p1d3</td>
<td id="p1d4" tabindex=4>text of p1d4</td>
<td id="p1d5" tabindex=5>text of p1d5</td>
<td id="p1d6" tabindex=6>text of p1d6</td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

Personally I would store it in one key instead of tons of keys. Simple reduce statement can let you gather all of the data.
var cells = document.querySelectorAll('td[id^="p"]')
function save() {
const data = Array.from(cells).reduce(function (o, td) {
o[td.id] = td.innerHTML;
return o
}, {})
console.log(data)
//window.localStorage("data", JSON.stringify(data))
}
function loadData () {
var data = window.localStorage("data")
if (data) {
var obj = JSON.parse(data)
Object.entries(obj).forEach( function (entry) {
document.getElementById(entry[0]).innerHTML = entry[1]
})
}
}
save()
<table>
<tr class="top">
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th class="wed">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td class="noedit" colspan="3"></td>
<td class="noedit" id="block-b">Meeting</td>
<td class="noedit" colspan="3"></td>
</tr>
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1></td>
<td id="p1d2" tabindex=2></td>
<td id="p1d3" tabindex=3></td>
<td id="p1d4" tabindex=4></td>
<td id="p1d5" tabindex=5></td>
<td id="p1d6" tabindex=6></td>
</tr>
<tr>
<th>Period 2</th>
<td id="p2d1"></td>
<td id="p2d2"></td>
<td id="p2d3"></td>
<td id="p2d4"></td>
<td id="p2d5"></td>
<td id="p2d6"></td>
</tr>
<tr>
<th></th>
<td class="noedit">Chapel</td>
<td class="noedit">Meeting or Advisory</td>
<td class="noedit">Advisory</td>
<td class="noedit">Class Meeting</td>
<td class="noedit">or Advisory</td>
<td class="noedit">Break</td>
</tr>
<tr>
<th>Period 3</th>
<td id="p3d1"></td>
<td id="p3d2"></td>
<td id="p3d3"></td>
<td id="p3d4"></td>
<td id="p3d5"></td>
<td id="p3d6"></td>
</tr>
<tr>
<th>Period 4</th>
<td id="p4d1"></td>
<td id="p4d2"></td>
<td id="p4d3"></td>
<td id="p4d4"></td>
<td id="p4d5"></td>
<td id="p4d6"></td>
</tr>
<tr>
<th>Period 5a</th>
<td id="p5ad1"></td>
<td id="p5ad2"></td>
<td class="noedit" rowspan="4"></td>
<td id="p5ad4"></td>
<td id="p5ad5"></td>
</tr>
<tr>
<th>Period 5b</th>
<td id="p5bd1"></td>
<td id="p5bd2"></td>
<td id="p5bd4"></td>
<td id="p5bd5"></td>
</tr>
<tr>
<th>Period 6</th>
<td id="p6d1"></td>
<td id="p6d2"></td>
<td id="p6d4"></td>
<td id="p6d5"></td>
</tr>
<tr>
<th>Period 7</th>
<td id="p7d1"></td>
<td id="p7d2"></td>
<td id="p7d4"></td>
<td id="p7d5"></td>
</tr>
</table>

I would recommend adding a class to each cell:
<tr>
<th>Period 1</th>
<td id="p1d1" tabindex=1 class="periodCell"></td>
<td id="p1d2" tabindex=2 class="periodCell"></td>
<td id="p1d3" tabindex=3 class="periodCell"></td>
<td id="p1d4" tabindex=4 class="periodCell"></td>
<td id="p1d5" tabindex=5 class="periodCell"></td>
<td id="p1d6" tabindex=6 class="periodCell"></td>
</tr>
Then doing something along the lines of the following:
$('.periodCell').each(function(index, elem)
{
localStorage.setItem(elem.id, elem.textContent);
});
you could do some other things with the selector so that you're not needing to add the class to every cell, but this is the most basic option...
another is regex on the cell ids... but that would be pretty painful

Highlight cell border color when click, change back when click to others

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>

How can remove next cell in table using JavaScript?

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"/>

How can I use special characters in angular directives attributes?

I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.
For example:
<my-custom-directive my-label="Lärm" />
Another example is the ui.bootstrap.tabs directive:
<tabset>
<tab heading="Lärm"> content ... </tab>
<tab heading="Second Heading"> content ... </tab>
</tabset>
This results in a tab with heading "L�rm". Any ideas?

Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.
Next bet would be to change the encoding of the html-output with
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Umlauts often is trial & error...

Use escape characters for javascript.
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
<th>Display</th>
<th>Friendly Code</th>
<th>Numerical Code</th>
<th>Description</th>
</tr>
<tr class="grey">
<td class="codes">Ä </td>
<td class="codes">&Auml;</td>
<td class="codes">&#196;</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">&auml;</td>
<td class="codes">&#228;</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>&Eacute;</td>
<td>&#201;</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>&eacute;</td>
<td>&#233;</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">&Ouml;</td>
<td class="codes">&#214;</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">&ouml;</td>
<td class="codes">&#246;</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">&Uuml;</td>
<td class="codes">&#220;</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">&uuml;</td>
<td class="codes">&#252;</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">&szlig;</td>
<td class="codes">&#223;</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">&laquo;</td>
<td class="codes">&#171;</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">&raquo;</td>
<td class="codes">&#187;</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">&#132;</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">&#147;</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">&#148;</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">&#176;</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">&euro;</td>
<td class="codes">&#128;</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>&pound;</td>
<td>&#163;</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>

Table Filtering, Sorting, Distinct Records using jquery/javascript/css in html

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.

Categories

Resources