JavaScript DHTML/jQuery/Table
Содержание
- 1 Add column to a table
- 2 Add table row to table body
- 3 Append to table body
- 4 Append value to table body
- 5 Change table row background
- 6 Choose the third table cell
- 7 Clone table row
- 8 Empty all table data
- 9 Fade in a table
- 10 Finds all table cell that are empty - they don"t have child elements or text.
- 11 Finds odd table rows, matching the second, fourth and so on
- 12 Finds the first table row.
- 13 Finds the third td.
- 14 If table row has table data cell
- 15 Remove a table
- 16 Strip a table
- 17 Table data hover
- 18 To add a special style to table cells that are being hovered over,
- 19 Toggle Strips
- 20 To toggle a style on table cells:
- 21 Use for each function to loop through table row
Add column to a table
<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>
<table id="exampleTable">
<tr>
<th>
Type
</th>
<th>
Element
</th>
</tr>
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
</form>
</body>
</html>
Add table row to table body
<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>
<h4>C Albums</h4>
<table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Album" id="tmpAddAlbum" />
</body>
</html>
Append to table body
<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>
<table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>R</td>
<td>1975</td>
</tr>
</tbody>
</table>
</body>
</html>
Append value to table body
<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>
<h4>C Albums</h4>
<table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Album" id="tmpAddAlbum" />
</body>
</html>
Change table row background
<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>
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</table>
</body>
</html>
Choose the third table cell
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Clone table row
<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 >
<table>
<thead>
<tr>
<th>Title</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
<tr id="tmp">
<td><input type="text" name="tmpTitle[]" value="0" /></td>
<td><input type="checkbox" name="tmpTitleChecked[]" value="1" /></td>
</tr>
</tbody>
</table>
<input type="submit" id="tmpAddRow" value="Add a Row" />
</form>
</body>
</html>
Empty all table data
<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>
<h4>C Albums</h4>
<table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>D</td>
<td>1980</td>
</tr>
</tbody>
</table>
<input type="submit" id="tmpEmptyTable" value="Empty Table" />
<input type="submit" id="tmpDelete" value="Delete Content" />
</body>
</html>
Fade in a table
<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>
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>
Finds all table cell that are empty - they don"t have child elements or text.
<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>
<table>
<tr><td>First</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</body>
</html>
Finds odd table rows, matching the second, fourth and so on
<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>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Finds the first table row.
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Finds the third td.
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
If table row has table data cell
<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>
<table>
<tr><td>First</td></tr>
<tr><td>asdf</td></tr>
<tr><td>asdf</td></tr>
</table>
</body>
</html>
Remove a table
<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>
<h4>C Albums</h4>
<table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>D</td>
<td>1980</td>
</tr>
</tbody>
</table>
<input type="submit" id="tmpEmptyTable" value="Empty Table" />
<input type="submit" id="tmpDelete" value="Delete Content" />
</body>
</html>
Strip a table
<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>
<table>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Addf</td>
</tr>
</table>
</body>
</html>
Table data hover
<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>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
To add a special style to table cells that are being hovered over,
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
Toggle Strips
<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>
<table onmouseover="swap()" onmouseout="swap()">
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Addf</td>
</tr>
</table>
</body>
</html>
To toggle a style on table cells:
jQuery Code
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
Use for each function to loop through table row
<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>
<table id="exampleTable">
<tr>
<th>
Type
</th>
<th>
Element
</th>
</tr>
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
</form>
</body>
</html>