How to select col id using jquery to hide via css - javascript

I have a table (and couldn't use because the header is offset by 1 when trying to hide the column) with each column having its own col id="". I want to use jquery in the following code to select the columns within the table and toggle them off and on.
Here is the table :
<article class="technical">
<div id="technical-container">
<h1><span id="technology">Technologies</span> / <span id="compliance">Compliance</span> / <span id="certification">Certification</span></h1>
<table id="tech-table" cellspacing="0">
<colgroup>
<col>
<col id="type" class="type">
<col id="name">
<col id="startdate">
<col id="currentenddate">
<col id="elapsed">
<col id="version">
<col id="rating">
<col id="project">
</colgroup>
<tbody>
<tr>
<td>type</td>
<td>Name</td>
<td>Start Date</td>
<td>Current/End Date</td>
<td>Elapsed</td>
<td>Version(s)</td>
<td>Personal Rating</td>
<td>Project</td>
</tr>
<tr>
<td>technology</td>
<td>J2EE</td>
<td>November, 2011</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>1.5, 1.6, 1.7</td>
<td>2</td>
<td>Contractor Optimization</td>
</tr>
<tr>
<td>technology</td>
<td>JS</td>
<td>April, 2012</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>?</td>
<td>1</td>
<td>Resume Builder</td>
</tr>
<tr>
<td>compliance</td>
<td>CIP</td>
<td>May, 2008</td>
<td>August, 2011</td>
<td>TODO, 3 years, 4 mos</td>
<td>n/a</td>
<td>2</td>
<td>Protection</td>
</tr>
<tr>
<td>certification</td>
<td>Red Cross</td>
<td>May, 2007</td>
<td>April, 2013</td>
<td>TODO, 6 years</td>
<td>n/a</td>
<td>3</td>
<td>Life Saving</td>
</tr>
</tbody>
</table>
</div>
</article>
here are the buttons that get clicked to do the hiding:
<article>
<header>
<h1>What</h1>
<div class="mydiv">
<p1>this sections involves what I work with</p1>
</div>
</header>
<section>
<div class="mydiv">
<span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
<!-- <input type="button" class="btn" value="Technologies" id="clickTech" / -->
</div>
</section>
<section>
<h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
<h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
<h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
<h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
<h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
<h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
</section>
<!-- <footer>
<h2>footer</h2>
<p>footer</p>
</footer> -->
</article>
here is the working selector for hiding the rows:
var rowSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table tr").each(function(){
if ($($(this).children()[0]).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
for (var id in hiders) {
$(id).click({type:hiders[id]}, rowSelector);
}
and this is what I have so far with the column selector, but need help with lines 3, 4, and 5:
var colSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table col").each(function(){
if ($($(this)).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in hiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
I appreciate your guidance and help.

Here's a javascript answer for you though if you don't want to use #jatrim's css solution
var colSelector = function (args) {
var num = 0;
var i = 0;
$($("#tech-table tr")[0]).find('td').each(function(){
if ($(this).text() == args.data.type)
num=i;
i++;
});
if (num!=0){
$("#tech-table tr").each(function(){
var tds = $(this).find('td');
$(tds[num]).toggle();
});
}
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in colHiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
Also the fiddle to test is here http://jsfiddle.net/ueKcL/

I think what you want is here: show/hide html table columns using css.
I particularly like this: $('td:nth-child(2)').hide(); Where 2 is the index of the column you'd like to hide.

You can probably do something like - add title (or another attribute to col tag) to col tag, and the value of title is the index of the column. So col id="name" would be
<col id="name" title="2">
ignoring the first empty col tag. then you will have to target the td using :nth-child (the title attribute) and hide them all.
You don't need to add title and still be able to figure out the index of the col but it simplifies the script using an attribute
OR
you can even pass the column index on the click of the buttons, there are a number of ways to do that as well. But eventually you still need to use :nth-child to hide the td

Related

Get id of link that opened the popup

I have a table with column that has a "view" link to view popup. On the popup,
I have a search button I want to get the id of the view link that opened the popup,
when I press search in the popup typically to get some data attributes
associated with each table link..(ex. $this.thisIdopenedMe)
<div id="popup" class="popup">
<input type="button" id="searchbtn" onclick="alert($('#smthing??').data("feature"))">
</div>
<table>
<tr> <div id="viewlink" data-feature="alfa" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="gama" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="bita" onclick="openPopup("popup")"></div> </tr> ...
</table>
I would just use vent delegation and assign more data listeners if you are going to follow the pattern you are using.
var table = document.querySelector("table");
var popUp = document.querySelector("#popup");
var btnSearch = document.querySelector("#searchbtn");
table.addEventListener("click", function (event) {
var target = event.target;
var elem = target.closest('[data-feature]');
if (elem) {
var selection = elem.dataset.feature;
popUp.classList.toggle("active");
btnSearch.dataset.item = selection;
}
});
btnSearch.addEventListener("click", function (event) {
console.log(btnSearch.dataset.item);
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<div id="popup" class="popup">
<input type="button" id="searchbtn" value="search">
</div>
<table>
<tr> <td><div id="viewlink" data-feature="alfa">A</div></td></tr>
<tr> <td><div id="viewlink" data-feature="gama">B</div></td></tr>
<tr> <td><div id="viewlink" data-feature="bita">C</div></td></tr>
</table>
You can create a global variable selectedFeature and in your openPopup function set that variable to the value of the data attribute so you have it on hand when you need it on search button click.
To get the select element data attribute, you can pass the event from the onclick event to your openPopup function.
function openPopup(div_id, data) {
popup = document.getElementById(div_id);
popup.dataset.feature = data;
console.log(popup.dataset);
}
function showData(div_id) {
popup = document.getElementById(div_id);
console.log(popup.dataset.feature);
}
<div id="popup" class="popup" data-feature="">
<input type="button" id="searchbtn" onclick="showData('popup')" value="press me">
</div>
<table>
<tr>
<div id="viewlink" data-feature="alfa" onclick="openPopup('popup',this.dataset.feature)">
alfa
</div>
</tr>
<tr>
<div id="viewlink" data-feature="gama" onclick="openPopup('popup',this.dataset.feature)">gama
</div>
</tr>
<tr>
<div id="viewlink" data-feature="bita" onclick="openPopup('popup',this.dataset.feature)">bita
</div>
</tr>
</table>

Angularjs - how to add a row dynamically when clicked on parent row

I am new to angularjs and stuck with the below problem.
There will be a table of rows created which reads data from JSON. Say there are 6 rows displayed.But in real time number rows will vary.
Each row has an accordion(+ symbol) in its first td. If this accordian is clicked then the children rows of that row should be displayed by reading the data from one more different JSON.
Similarly for the remaining 5 rows as well it should display the children rows for the respective row's accordion is clicked.
I have created the table with the 6 rows displayed.
But the challenge I am facing is how to link child rows to the existing rows dynamically when clicked. Here is the plunkr - https://plnkr.co/edit/FTbjn9ZbAOTqc3b6j52h?p=preview
Any help is appreciated.
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
See the Plunkr solution
You want a 2nd <tr> with ng-repeat following the first:
<tr ng-if="item.Labels==child.Labels" ng-show="item.opened" ng-repeat="child in children">
<td>{{child.name}}</td>
...etc
</tr>
This will build additional rows where the bundle .Labels matches the repo .Labels and will be shown only when the repo's opened property is true. The + button will toggle the opened property for each item. You'll need two minor edits to your data to make this work:
Add children data to the $scope (for access in the 2nd ng-repeat).
Add default opened: false property to all repos (except the first, which is true).
This won't show the components, but hopefully you get the idea.
See the Plunkr solution
If you want to inset row after row clicked use this:
<style>
#tableid {
font-size: 14px;
}
#tableid .childRow {
font-size:10px;
}
#tableid .childRow td:first-of-type {
padding-left:10px;
}
</style>
<table id="tableid">
<tr onclick="AddRow(this)">
<td>abcd</td>
</tr>
</table>
<script>
function AddRow(e)
{
for (var i = 0; i < 5; i++)
{
var index = e.rowIndex;
var table = document.getElementById("tableid");
var row = table.insertRow(index + 1 + i);
row.setAttribute('class', 'childRow');
var cell = row.insertCell(0);
cell.innerHTML = "efgh";
}
}
</script>

Finding child Id present for particular parent id - javascript

I have the below two TR HTML DOM tree. I have to find the total count of id necessary is mapped only for id successDesktop.
<TR class="greybgContent" id="7">
<TD align="center">
<DIV class="necessary" id="necessary"> </DIV>
</TD>
<TD>8 Bureau Consent </TD>
<TD id="successDesktop">
<DIV class="floatLeft selectWidth15">
<DIV class="available"></DIV>
</DIV>
<DIV class="floatLeft selectWidth85 greenText">Uploaded</DIV>
</TD>
</TR>
<TR class="greybgContent" id="8">
<TD align="center">
<DIV class="necessary" id="notrequired"> </DIV>
</TD>
<TD> 9 Address Details</TD>
<TD id="successDesktop">
<DIV class="floatLeft selectWidth15">
<DIV class="available"></DIV>
</DIV>
<DIV class="floatLeft selectWidth85 greenText">Uploaded</DIV>
</TD>
</TR>
If I understand your question correctly, I believe this may be what you are trying to accomplish (I used jQuery).
$(document).ready(function(){
// set the initial count to zero
var count = 0;
// loop over all table rows
$('tr').each(function(index, obj){
// try to find an element with the id 'successDesktop'
if ($(obj).find('#successDesktop').length > 0)
{
// if 'successDesktop' exists, look for an element with id 'necessary'
if ($(obj).find('#necessary').length > 0)
{
// increase the count
count++;
}
}
});
console.log('count: ', count);
});
Additionally you may want to use classes instead of IDs for 'necessary' and 'successDesktop', because IDs are only intended to be used once per page. Classes are intended to be re-usable.

Am I using eq(...) incorrectly? Or what is wrong here?

I have a block of HTML like
<tbody>
<tr id="first-score-row">
<td>Steve Ballmer</td>
<td>1923</td>
<td class="hide-under-480px">10/11/2015 9:21:39 PM</td>
</tr>
<tr>
<td colspan="3">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-more-scores">Click to See More</a></p>
</td>
</tr>
<tr class="hidden">
<td>Michael Jackson</td>
<td>300</td>
<td class="hide-under-480px">10/6/2015 2:37:30 PM</td>
</tr>
<tr class="hidden">
<td>Weird Al</td>
<td>180</td>
<td class="hide-under-480px">10/10/2015 1:20:38 AM</td>
</tr>
<tr class="hidden">
<td>Obama smokes cigs</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:37 PM</td>
</tr>
<tr class="hidden">
<td>Donald Trump</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:02 PM</td>
</tr>
<tr class="hidden">
<td colspan="3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-fewer-scores" target="_blank">See Fewer Scores</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p>See <u>All</u> Scores</p>
</div>
</div>
</td>
</tr>
</tbody>
and I'm trying to make an event that reveals or hides all the rows besides the first one (which will always be revealed) in animated fashion, 1/5th of a second between each one being revaled. My attempted event handler is
// click function for the "See More Scores" and "See Fewer Scores" buttons
$('.show-fewer-or-more-scores').click(function ( )
{
var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)');
for (var k = 0, n = otherRows.length; k < n; ++k)
{
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
}
});
and for some reason it is not working. There are no errors printed to the console, but nothing happens, the class hidden is not toggled. What am I doing wrong here?
Live example here
To target All rows but first one use the :gt(0) selector:
jsBin demo
var $rowsNotFirst = $("table tbody tr:gt(0)");
var $scoresBtn = $(".show-fewer-or-more-scores");
$scoresBtn.click(function(){
$rowsNotFirst.toggleClass("hidden");
});
To add the timeout:
jsbin demo
$scoresBtn.click(function(){
$rowsNotFirst.filter(function(idx, el){
setTimeout(function(){
$(el).toggleClass("hidden");
}, 300*idx); // 300 * element index
});
});
I replaced your for loop with a jQuery each function.
otherRows.each(function(i){
setTimeout(function () {
otherRows.eq(i).toggleClass('hidden');
}, i * 200 );
});
Dont forget the .hidden class, something like:
.hidden {display:none}
Other than that it works fine.
https://jsfiddle.net/partypete25/nvbraokh/20/embedded/result/
The actual problem is here.
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
The value of k will be equal to the value of n once the for loop is completed. So everytime when this line is called, the k value will be same, but no table row exists with that index value.
You have to get the table row element and then add the method toggleClass to it.

incrementing the value of a input field in the cloned row

1)here i'm doing clone of a row...but this code is working only in eclipse [ ie ,cloning is working ] and it is also not working in any browsers.
2)What is the solution to get the values of text boxes in the cloned rows having same name, and insert into the database using jsp and servlet?
how can i get those values with same name
3)i have servlet code to get only single value from jsp
String address_seq_num =request.getParameter("address_seq_num");
how can i get the value of address seq number in the cloned row fromjsp to servlet to insert into the next row of a table in the database.
4)if i mention "DOCUMENT TYPE" to this code ,it will not work in eclipse also.....
please guide me...
JavaScript
function clonetable() {
var x=document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
var row = document.getElementById("table_row_clone"); // find row to copy
var table = document.getElementById("table_body"); // find table to append to
var clone = row.cloneNode(true); // copy children too
var tb1 = clone.document.getElementById("asn");//here i'm incrementing the value
tb1.value=rowCount+1;//of "address seq num " in the cloned row
clone.id = "abc"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function deltable() {
var x = document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
if (rowCount > 1) {
x.deleteRow(rowCount - 1);
} //delete the last row
}
HTML
<table id="main_table" align="center" style="width:75%">
<tbody id="table_body">
<tr id="table_row_clone">
<td>
<table align="center" style="width:100%">
<tr>
<td align="center">
<div style="border:3px solid silver;border-radius:5px;background-color:grey">
<table width="100%">
<tr>
<th align="center">Address Details</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
<table align="center" style="width:99%">
<tr style="background-color:#1E90FF">
<td style="width:35%">
<table width="100%">
<tr id="slrow">
<td style="width:43%">Address Seq Num</td>
<td>
<input id="asn" style="width:60px" name="address_seq_num" type="text" value="1" readonly>
</td>
</tr>
</table>
</td>
<td width="49%" align="right">
<input style="width:80%" type="text" value="Reg.office/Primary Office">
</td>
<td align="right">
<input style="width:30px" type="button" value="+" onclick="clonetable()">
<input style="width:30px" type="button" value="-" onclick="deltable()">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
Per your HTML (which is messy, by the way) you can increment that textbox's value with something like:
var tb = document.getElementById("asn");
tb.value = parseInt(tb.value, 10) + 1;
The trick is you have to cast the textbox's value into a number, which is what parseInt is doing in that example.
Note that the above snippet will give you "NaN" in the textbox if the value is not a valid number - it's not doing any data validation at all.

Categories