JavaScript Tutorial/jQuery/Table
Содержание
- 1 30. Add column to a table
- 2 30. Add table row to table body
- 3 30. Append to table body
- 4 30. Append value to table body
- 5 30. Change table row background
- 6 30. Choose the third table cell
- 7 30. Clone table row
- 8 30. Empty all table data
- 9 30. Fade in a table
- 10 30. Finds all table cell that are empty - they don"t have child elements or text.
- 11 30. Finds odd table rows, matching the second, fourth and so on
- 12 30. Finds the first table row.
- 13 30. Finds the third td.
- 14 30. If table row has table data cell
- 15 30. Remove a table
- 16 30. Strip a table
- 17 30. Table data hover
- 18 30. To add a special style to table cells that are being hovered over,
- 19 30. Toggle Strips
- 20 30. To toggle a style on table cells:
- 21 30. Use for each function to loop through table row
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
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>
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
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 #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #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 >
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
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 #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #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 #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #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
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>
</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>