[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 390
  • Last Modified:

Need javascript and/or css to make table row text bold when link is clicked

This seems simple, but for some reason it is giving me trouble. I have a dynamically created table that displays data from a database. Each row has one cell with a configure link that opens up settings that applys specifically to that row of data. When the configure link is clicked, I want all the text in each cell of the whole row to turn bold. I included a static sample.
<table>
<tr><td>1.</td><td>Dan</td><td>333 Main St.</td><td>555-1212</td><td><a href=#>configure</a></td></tr>
<tr><td>2.</td><td>Mary</td><td>663 Main St.</td><td>555-1212</td><td><a href=#>configure</a></td></tr>
<tr><td>3.</td><td>Craig</td><td>45 Main St.</td><td>555-1212</td><td><a href=c#>configure</a></td></tr>
</table>

Open in new window

0
advcom
Asked:
advcom
  • 3
  • 2
  • 2
  • +1
1 Solution
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/3pmtx/

Put the following in the head section :



<script language="javascript" type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/simpleyui/simpleyui.js"></script>
<script language="javascript" type="text/javascript">
        Y.on("domready", init);

        function init() {
            Y.all("a").on("click", function(e) {
                e.preventDefault();
                e.currentTarget.ancestor("table").all("tr").setStyle("font-weight","");
                e.currentTarget.ancestor("tr").setStyle("font-weight","bold");
            })
        }
</script>

Open in new window

0
 
COBOLdinosaurCommented:
For the configuration cells the simple approach is:

  <td onclick="this.parentNode.style.fontWeight='bold'">

Open in new window


If there are a lot of rows you might go with the script, but if there are only a few rows local and direct may be better.
0
 
advcomAuthor Commented:
Thanks for the replies. I tried both suggestions, but here is the issue. Leakim971, I pasted your code in a simple text file and also tried it on your site, but nothing turns bold when I click the configure link. Maybe I am doing something wrong, so I pasted the exact code below. COBOLdinosaur, I like simple, but not sure how to make that toggle bold on and off when there are multiple rows. Also need it to bold the whole row when I click configure, not just bold the row I clicked. Anyways any idea what I did wrong here?
<script language="javascript" type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/simpleyui/simpleyui.js"></script>
<script language="javascript" type="text/javascript">
        Y.on("domready", init);

        function init() {
            Y.all("a").on("click", function(e) {
                e.preventDefault();
                e.currentTarget.ancestor("table").all("tr").setStyle("font-weight","");
                e.currentTarget.ancestor("tr").setStyle("font-weight","bold");
            })
        }
</script>

<table>
<tr><td>ted</td><td>4 Levi st.</td><td><a href=#>configure</a></td></tr>
<tr><td>mary</td><td>306 a st.</td><td><a href=#>configure</a></td></tr>
<tr><td>bob</td><td>306 a st.</td><td><a href=#>configure</a></td></tr>
</table>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
try this :
<!doctype html><html>
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Google</title>
<style type="text/css">
	.bb {
		font-weight: bold;
	}
</style>
<script language="javascript" type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/simpleyui/simpleyui.js"></script>
<script language="javascript" type="text/javascript">

	YUI().use("node", "event", "event-base-ie", function(Y) {

        Y.on("domready", init);

        function init() {
            Y.all("a").on("click", function(e) {
                e.preventDefault();
                e.currentTarget.ancestor("table").all("tr").removeClass("bb");
                e.currentTarget.ancestor("tr").addClass("bb");
            })
        }
	})
</script>
</head>
<body>
<table>
<tr><td>ted</td><td>4 Levi st.</td><td><a href=#>configure</a></td></tr>
<tr><td>mary</td><td>306 a st.</td><td><a href=#>configure</a></td></tr>
<tr><td>bob</td><td>306 a st.</td><td><a href=#>configure</a></td></tr>
</table>
</body>
</html>

Open in new window

0
 
COBOLdinosaurCommented:
A toggle is not difficult.  just needs a little more code:
<script type="text/javascript">
var lastrow=false;
function hilite(x)
{
   x.style.fontWeight='bold';
   if (lastrow)
   {
   lastrow.style.fontWeight='normal';
   }
   lastrow=x;
}
</script>

Open in new window


then in the table:
<table>
<tr><td>ted</td><td>4 Levi st.</td><td onclick="hilite(this.parentNode)"><a href=#>configure</a></td></tr>
<tr><td>mary</td><td>306 a st.</td><td onclick="hilite(this.parentNode)"><a href=#>configure</a></td></tr>
<tr><td>bob</td><td>306 a st.</td><td onclick="hilite(this.parentNode)"><a href=#>configure</a></td></tr>
</table>

Open in new window

0
 
Jesse MatlockUX EngineerCommented:
This is a much more understandable and readable approach, using jQuery:
add this to the <head> of your page, and it will work. To improve this, move the CSS to your CSS sheet, and add a class to the configure links in your table,.. then use that class to target those links in the code below (instead of 'td a').

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		// it would be better to add a class to the <a> link in your table, and use 'a.your_class' instead of 'td a' below
		  $('td a').click(function() {
			$(this).closest('tr').toggleClass('selected');
		});
	});  // end docready
</script>
<style type="text/css" media="screen">
	tr.selected td a {font-weight:bold;}
</style>

Open in new window

0
 
advcomAuthor Commented:
Thanks everyone for all the replies. All 3 seem to work as I wanted, but the simplest by far was by COBOLdinosaur. It just doesn't get simpler than that.
0
 
COBOLdinosaurCommented:
That kind of naked javascript has worked for more than a dozen years it pre-dates jscript, ajax, and all the trendy development tools along the way; and it is still the best way to solve most problems.

When I was first on EE 11 years ago all a web developer needed was a good text editor, and a modern browser.  It is still the same today.  All the web developer toys and trends that have come along in that time just added to complexity, or made messy code.  

Simple is best even if it's old fashioned... and I really am a dinosaur. :^)
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now