JavaScript Tutorial/jQuery/Table

Материал из Web эксперт
Перейти к: навигация, поиск

30. Add column to a table

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("#exampleTable").find("td").each(function(i, el) {
           var inputEl = $(el).children().get(0);
           $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");
      });
       
   });
   </script>
 </head>
 <body>
    <form>

           Type

           Element

           <input type="button" value="Input Button"/>

           <input type="checkbox" />

   </form>

 </body>

</html></source>


30. Add table row to table body

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("input#tmpAddAlbum").click(
     function($e) {
       $e.preventDefault();      
       $("table tbody")[0].innerHTML +=
         "<tr>\n" +
         "  <td>\n" + 
         "    <input type="text" value="value" size="25" />\n" + 
         "  </td>\n" +
         "  <td>1980</td>\n" +
         "</tr>\n";
     }
   );
 }

); 

   </script>
 </head>
 <body>

C Albums

<thead> </thead> <tbody> </tbody>
Title Year 
    <input type="submit" value="Add Album" id="tmpAddAlbum" />
 </body>

</html></source>


30. Append to table body

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("table tbody").append(
     "<tr>\n" +
     "  <td>D</td>\n" +
     "  <td>1999</td>\n" +
     "</tr>\n"
   );
 }

); 

   </script>
   <style type="text/css">

table { 

   width: 100%;
   background: lightgreen;

} th { 

   background: green;
   color: lightgreen;

} 

   </style>
 </head>
 <body>
<thead> </thead> <tbody> </tbody>
Title Year
R 1975 
 </body>

</html></source>


30. Append value to table body

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("input#tmpAddAlbum").click(
     function($e) {
       $e.preventDefault();      
       $("table tbody").append(
         "<tr>\n" +
         "  <td>\n" + 
         "    <input type="text" value="value" size="25" />\n" + 
         "  </td>\n" +
         "  <td>1980</td>\n" +
         "</tr>\n"
       );
     }
   );
 }

); 

   </script>
   <style type="text/css">

table { 

   width: 100%;
   background: lightgreen;

} th { 

   background: green;
   color: lightgreen;

} 

   </style>
 </head>
 <body>

C Albums

<thead> </thead> <tbody> </tbody>
Title Year 
    <input type="submit" value="Add Album" id="tmpAddAlbum" />
 </body>

</html></source>


30. Change table row background

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("tr").css("background", "red");

   });
   </script>
 </head>
 <body>
A
B
C
D
 </body>

</html></source>


30. Choose the third table cell

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("td:eq(2)").css("color", "red");
               
       });
   </script>
 </head>
 <body>
   <body>
TD #0TD #1TD #2
TD #3TD #4TD #5
TD #6TD #7TD #8
   </body>

</html></source>


30. Clone table row

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("input#tmpAddRow").click(
     function($e) {
       $e.preventDefault();
       $("tr#tmp").clone(true).removeAttr("id").appendTo("tbody");
     }
   );
   $("tr input[type=text]").focus(
     function() {
       $(this).addClass("myFocused");   
     }
   ).blur(
     function() {
       $(this).removeClass("myFocused");
     }
   );
 }

); 

   </script>
 </head>
 <body>
    <form >
<thead> </thead> <tbody> </tbody>
Title Selected
<input type="text" name="tmpTitle[]" value="0" /> <input type="checkbox" name="tmpTitleChecked[]" value="1" /> 
      <input type="submit" id="tmpAddRow" value="Add a Row" />
    </form>
 </body>

</html></source>


30. Empty all table data

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("input#tmpEmptyTable").click(
     function($e) {
       $e.preventDefault();
       $("td").empty();
     }
   );
   $("input#tmpDelete").click(
     function($e) {
       $e.preventDefault();
       $("h4, table").remove();
     }
   );
 }

); 

   </script>
 </head>
 <body>

C Albums

<thead> </thead> <tbody> </tbody>
Title Year
D 1980 
    <input type="submit" id="tmpEmptyTable" value="Empty Table" />
    <input type="submit" id="tmpDelete" value="Delete Content" />
 </body>

</html></source>


30. Fade in a table

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
           $("td:parent").fadeTo(1500, 0.3);
       });
   </script>
 </head>
 <body>
   <body>
Value 1
Value 2
   </body>

</html></source>


30. Finds all table cell that are empty - they don"t have child elements or text.

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
            $("td:empty").text("Was empty!").css("background", "red");
       });
   </script>
 </head>
 <body>
   <body>
First
   </body>

</html></source>


30. Finds odd table rows, matching the second, fourth and so on

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
              
              $("tr:odd").css("background-color", "#bbbbff");
       });
   </script>
 </head>
 <body>
   <body>
First
Middle
Last
   </body>

</html></source>


30. Finds the first table row.

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("tr:first").css("background-color", "red");
               
       });
   </script>
 </head>
 <body>
   <body>
TD #0TD #1TD #2
TD #3TD #4TD #5
TD #6TD #7TD #8
   </body>

</html></source>


30. Finds the third td.

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("td:eq(2)").css("color", "red");
               
       });
   </script>
 </head>
 <body>
   <body>
TD #0TD #1TD #2
TD #3TD #4TD #5
TD #6TD #7TD #8
   </body>

</html></source>


30. If table row has table data cell

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              
           $("tr:has(td)").css("color","red");
       });
   </script>
 </head>
 <body>
   <body>
First
asdf
asdf
   </body>

</html></source>


30. Remove a table

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("input#tmpEmptyTable").click(
     function($e) {
       $e.preventDefault();
       $("td").empty();
     }
   );
   $("input#tmpDelete").click(
     function($e) {
       $e.preventDefault();
       $("h4, table").remove();
     }
   );
 }

); 

   </script>
 </head>
 <body>

C Albums

<thead> </thead> <tbody> </tbody>
Title Year
D 1980 
    <input type="submit" id="tmpEmptyTable" value="Empty Table" />
    <input type="submit" id="tmpDelete" value="Delete Content" />
 </body>

</html></source>


30. Strip a table

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("table tr:nth-child(even)").addClass("striped");
       });
   </script>
   <style>
     body,td {
       font-size: 10pt;
     }
     table {
       background-color: black;
       border: 1px black solid;
       border-collapse: collapse;
     }
     th {
       border: 1px outset silver;
       background-color: maroon;
       color: white;
     }
     tr {
       background-color: white;
       margin: 1px;
     }
     tr.striped {
       background-color: coral;
     }
     td {
       padding: 1px 8px;
     }
   </style>
 </head>
 <body>
   <body>
Year Make Model
1997 Chrysler Jeep
2000 Chrysler Jeep
2005 Chrysler Jeep
2007 Dodge Addf 
   </body>

</html></source>


30. Table data hover

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready( 

 function() {
   $("table").hover(
     function() {
       $("td").addClass("myHover");
     },
     function() {
       $("td").removeClass("myHover");
     }
   )
   .click(
     function() {
       $("td").toggleClass("mySelected");
     }
   );
 }

); 

   </script>
   <style type="text/css">

td { 

 width: 100px;
 height: 100px;
 border: 1px solid rgb(200, 200, 200);

} td.myHover { 

 background: yellow;

} td.mySelected { 

 background: C;

} 

   </style>
 </head>
 <body>
<tbody> </tbody> 
 </body>

</html></source>


30. To add a special style to table cells that are being hovered over,

   <source lang="javascript">

$("td").hover( 

 function () {
   $(this).addClass("hover");
 },
 function () {
   $(this).removeClass("hover");
 }

);</source>


30. Toggle Strips

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("table tr:nth-child(even)").addClass("striped");
          
       });
       function swap() {
          $("tr").toggleClass("striped");
       }    
   </script>
   <style>
     body,td {
       font-size: 10pt;
     }
     table {
       background-color: black;
       border: 1px black solid;
       border-collapse: collapse;
     }
     th {
       border: 1px outset silver;
       background-color: maroon;
       color: white;
     }
     tr {
       background-color: white;
       margin: 1px;
     }
     tr.striped {
       background-color: coral;
     }
     td {
       padding: 1px 8px;
     }
   </style>
 </head>
 <body>
   <body>
Year Make Model
1997 Chrysler Jeep
2000 Chrysler Jeep
2005 Chrysler Jeep
2007 Dodge Addf 
   </body>

</html></source>


30. To toggle a style on table cells:

   <source lang="javascript">

jQuery Code $("td").toggle( 

 function () {
   $(this).addClass("selected");
 },
 function () {
   $(this).removeClass("selected");
 }

);</source>


30. Use for each function to loop through table row

   <source lang="javascript">

<html> 

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("#exampleTable").find("td").each(function(i, el) {
           var inputEl = $(el).children().get(0);
           $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");
       })
   });
   </script>
 </head>
 <body>
    <form>

           Type

           Element

           <input type="button" value="Input Button"/>

           <input type="checkbox" />

   </form>

 </body>

</html></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Table&oldid=9499»