Grab the RSS feed

Highlight a Selected Row in a table using Jquery and CSS class

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. –W3Org

In design purpose we can easily design the templates using the tables instead of divs. But if you design the template please use the divs instead of table (Suggested by our designer).Ok now we go for our topic to highlight the table rows.

Why we need to highlight the table row?

Most of the times we need to display the data like a grid. At that time choose the table to display the data. For example if you want to display the data from the database like books in category A. We need to get all the data row by row and include the rows in a table and we place the data in the appropriate columns.

If user wants to delete the third row we need to make the checkbox or radio button to choose the row and if user click the delete button we will delete the row. At this situation we need to highlight which row user chosen for delete, by this way we can avoid accidentally delete the wrong one.

VIEW DEMO

Coding Part:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Technotiger87-Highlight Selected row in a table using Jquery and CSS</title>

<script type="text/javascript" src="js/Jquery.1.4.4.js"></script>

<style>

.tableborder

{

padding: 2px 4px 2px 4px;

border: 1px solid #FFFFFF;


}

.tabletitle

{


background:none repeat scroll 0 0 #9EC630;

border-color:#FFFFFF;

border-style:solid;

border-width:1px 1px 1px 0;

color:#FFFFFF;

font-size:14px;

font-weight:bold;

height:20px;

padding-left:5px;

text-align:center;

vertical-align:bottom;

width:150px;

}

.tableodd

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#E3EEC4;

vertical-align:top;

}

.tableeven

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#d3E3A4;

vertical-align:top;

}

.highlight

{

font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#9EC630;

background-color:#FFFFFF;

vertical-align:top;

}

</style>

</head>


<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableborder">

  <tr class="tabletitle">

    <td class="tabletitle">CheckBox</td>

    <td class="tabletitle">Title</td>

    <td class="tabletitle">Link</td>

  </tr>

  <tr class="tableodd">

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven"><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven" ><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

</table>


</body>

</html>

Jquery Part:

$(document).ready(function()
 {
   $('td input[type="checkbox"]').live('click',function(){
 if($(this).attr('noclass')!='1')
 {
     if ($(this).is(':checked')){
      anyrowschecked=1;
      
        $(this).parent().addClass('highlight');
        $(this).parent().siblings().addClass('highlight');
     } else if($(this).parent().is('.highlight')) {
       $(this).parent().removeClass('highlight');
       $(this).parent().siblings().removeClass('highlight');
     }
 }
    });
   $('td .deletecontent').live('click',function(){
     var selected=$(this).parent().attr('class');
     if(selected.indexOf("highlight")!=-1)
     {
         alert('You are doing deletion.This will delete the entire data');
       var yes= confirm("Do you really want to delete??");
      if(yes)
      {
        alert("Do Whatever You want");
      }
     }
     else
     {
       
         alert('Please ensure you are deleting the selected row');
     }
       });
 });

Create multilingual site and allow user to make content in their native language.

Hi Friends,

The multilingual site is now popular more than before a year. Because the user coming to internet is not only the English experts. Even the rural peoples those who are not having the English as first language want to access the internet content. I will give the simple example and efficiency of multilingual site.

“Information is World”

Why Multilingual?

A good question why we need to make the same content in different languages. This is because you can get the users globally. Not only from English as first language countries. From my real life experience:
My friends’ brother come to my home and asked me to collect the ten noble prize winners and the reason for getting the noble prize. Then I googled it and collect the information of 10 peoples and the reason for getting noble prize. Then he told me he is not from the English is the medium in his school. So he wants to collect the information in his language. But most of the website provides the information in English only. After that we go for wikipedia and got the information in his language.
This is a small example. Like that we can give more reasons for creating the multilingual website.

How Convert the content into several languages in single click?

If you are providing the information and not allow the user to make the content you can convert the entire site content into 52 languages in a single click using the http://translateth.is/. I used it and tested it. Its really fast and easy to integrate into your site by simple copy and paste of their JavaScript. You can get the translate button and in a single click you can convert the entire content into the language what they want to use. This will reduce the time and no headache for the webdevelopers.








Allowing user to make content in their language.

Some times we need to allow the user to make the content like giving comments, etc.,.At that time we can use the google Ajax API to make the virtual keyboard to the user and allowing them to make the content in their language. For this first you need to get the key by registering on their site and then use it for your site. Below I will give the example how to use google Ajax translation API.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google AJAX Language API Sample</title>

    <script src="https://www.google.com/jsapi?key=Your KEY"></script>

    <script type="text/javascript">


    google.load("elements", "1", {

          packages: "keyboard"

      });

function onLoad() {

        var kbd = new google.elements.keyboard.Keyboard(

          [google.elements.keyboard.LayoutCode.YOUR LANGUAGE],

          ['t1']);

      }


      google.setOnLoadCallback(onLoad);

    </script>

  </head>

  <body style="font-family: Arial;border: 0 none;">

    <textarea id="t1" style="width: 600px; height: 200px;"></textarea>

  </body>

</html>

Put the language what you want in the given format. But for saving the content in different language you need to consider the database charset. It needs to support your language.
Thanks.

How to create the PDF on the fly using PHP?

Portable Document Format (PDF) is an open standard for document exchange. The file format created by Adobe Systems in 1993 is used for representing two-dimensional documents in a manner independent of the application software, hardware, and operating system. ---From wikipedia.

In my project we mostly making the Reports using PDF. So I got some experience in creating PDF on the fly using PHP and I want to share it with the readers of TT.

Libraries:

At first I used the FPDF then I moved to TCPDF contain some more features on TCPDF.
You can find the advantages of TCPDF over FPDF here and here .

Creating simple PDF:

As the name indicates its simple one. But here we are going to use the query and separate functionality for the content display.

In coding section you can get the entire Code.

Problems:
Here I am trying to put the column name when I am creating the PDF i.e.Instead of $row[0] I want to put $row[‘columnname’]. It throws an error.

Hint:
Don’t start the output In this page like echo,print,or HTML. Because it throws an error like the output already started.
$pdf->SetPrintHeader(false);
$pdf->SetPrintFooter(false);

Use the above lines to turn off header and footer.
Code is here:
<?php
require_once('tcpdf/config/lang/eng.php');
require_once('tcpdf/tcpdf.php');

// extend TCPF with custom functions
class MYPDF extends TCPDF {

    public function ColoredTable($header,$data) {
   $this->SetFillColor(255, 0, 0);
        $this->SetTextColor(255);
        $this->SetDrawColor(128, 0, 0);
        $this->SetLineWidth(0.3);
        $this->SetFont('', 'B');
        // Header
  $this->headerdisplay();
  $this->anotherdetaildisplay();
  $header = array('Country', 'Capital', 'Area (sq km)', 'Pop. (thousands)');
  $data=array('0'=>array('Country', 'Capital', 'Area (sq km)', 'Pop. (thousands)'));
        $w = array(40, 35, 40, 45);
        $num_headers = count($header);
        for($i = 0; $i < $num_headers; ++$i) {
            $this->Cell($w[$i], 7, $header[$i], 1, 0, 'C', 1);
        }
  
        $this->Ln();
  
        // Color and font restoration
        $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
   
        // Data
        $fill = 0;
  $connection=mysql_connect("yourhost","username","password") or die("could not connect db");
  $db=mysql_select_db("db",$connection)  or mysql_errno();
  $sql="SELECT * FROM table";
  $result=mysql_query($sql,$connection);
       /* foreach($data as $row) {*/
    while($row=mysql_fetch_array($result))
    {
            $this->Cell($w[0], 6, $row[0], 'LR', 0, 'L', $fill);
            $this->Cell($w[1], 6, $row[1], 'LR', 0, 'L', $fill);
            $this->Cell($w[2], 6, number_format($row[2]), 'LR', 0, 'R', $fill);
            $this->Cell($w[3], 6, number_format($row[3]), 'LR', 0, 'R', $fill);
            $this->Ln();
            $fill=!$fill;
        }
        $this->Cell(array_sum($w), 0, '', 'T');
  
    }
 
 public function headerdisplay()
 {
    $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td>Test<br/>Test<br/>Test</td>
    </tr>
</table>
EOD;
$this->writeHTML($tbl, true, false, false, false, '');
 }
 public function anotherdetaildisplay()
 {
  $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td></td>
        <td></td>
        <td>Test at Right<br/>P O BOX 11097<br/>CHICAGO, IL 60611</td>
    </tr>
</table>
EOD;
 
   $this->writeHTML($tbl, true, false, false, false, '');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td>LastName FirstName<br/>Address<br/>CITY STATE ZIP</td>
    </tr>
</table>
EOD;
 
   $this->writeHTML($tbl, true, false, false, false, '');
 }
 
}

$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('TechnoTiger');
$pdf->SetTitle('Tutorial');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->setLanguageArray($l);
$pdf->SetFont('helvetica', '', 12);
$pdf->AddPage();
$pdf->ColoredTable($header, $data);
$pdf->Output('example_011.pdf', 'I');
?>

Why there is no post on last four months?

Hi Friends,

If you see the last post was published in Jul 11, 2010.After that I cant post a single line.Because of the following reasons.

  1.  I switch over to another company.
  2. Moved to new busiest city regarding the job.
  3. Huge number of challenging tasks make me busy

From the challenging tasks I learned a lot.So for TT readers you can expect more number of post in the following days.
Have a nice day.

 
Real Time Web Analytics