http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FTable
JavaScript DHTML/jQuery/Table - История изменений
2026-04-04T20:37:30Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Table&diff=2804&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Table&diff=2805&oldid=prev
Admin: 1 версия
2010-05-26T07:23:51Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add column to a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#exampleTable").find("td").each(function(i, el) {<br />
var inputEl = $(el).children().get(0);<br />
$(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<table id="exampleTable"><br />
<tr><br />
<th><br />
Type<br />
</th><br />
<th><br />
Element<br />
</th><br />
</tr><br />
<tr><br />
<td><br />
<input type="button" value="Input Button"/><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<input type="checkbox" /><br />
</td><br />
</tr><br />
</table><br />
</form><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Add table row to table body==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpAddAlbum").click(<br />
function($e) {<br />
$e.preventDefault(); <br />
$("table tbody")[0].innerHTML +=<br />
"<tr>\n" +<br />
" <td>\n" + <br />
" <input type="text" value="value" size="25" />\n" + <br />
" </td>\n" +<br />
" <td>1980</td>\n" +<br />
"</tr>\n";<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<h4>C Albums</h4><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Year</th> <br />
</tr><br />
</thead><br />
<tbody><br />
</tbody><br />
</table><br />
<input type="submit" value="Add Album" id="tmpAddAlbum" /><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Append to table body==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("table tbody").append(<br />
"<tr>\n" +<br />
" <td>D</td>\n" +<br />
" <td>1999</td>\n" +<br />
"</tr>\n"<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
table {<br />
width: 100%;<br />
background: lightgreen;<br />
}<br />
th {<br />
background: green;<br />
color: lightgreen;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Year</th> <br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>R</td><br />
<td>1975</td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Append value to table body==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpAddAlbum").click(<br />
function($e) {<br />
$e.preventDefault(); <br />
$("table tbody").append(<br />
"<tr>\n" +<br />
" <td>\n" + <br />
" <input type="text" value="value" size="25" />\n" + <br />
" </td>\n" +<br />
" <td>1980</td>\n" +<br />
"</tr>\n"<br />
);<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
table {<br />
width: 100%;<br />
background: lightgreen;<br />
}<br />
th {<br />
background: green;<br />
color: lightgreen;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h4>C Albums</h4><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Year</th> <br />
</tr><br />
</thead><br />
<tbody><br />
</tbody><br />
</table><br />
<input type="submit" value="Add Album" id="tmpAddAlbum" /><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Change table row background==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("tr").css("background", "red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<table><br />
<tr><td>A</td></tr><br />
<tr><td>B</td></tr><br />
<tr><td>C</td></tr><br />
<tr><td>D</td></tr><br />
</table><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Choose the third table cell==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("td:eq(2)").css("color", "red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table border="1"><br />
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><br />
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><br />
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Clone table row==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpAddRow").click(<br />
function($e) {<br />
$e.preventDefault();<br />
$("tr#tmp").clone(true).removeAttr("id").appendTo("tbody");<br />
}<br />
);<br />
$("tr input[type=text]").focus(<br />
function() {<br />
$(this).addClass("myFocused"); <br />
}<br />
).blur(<br />
function() {<br />
$(this).removeClass("myFocused");<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<form ><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Selected</th> <br />
</tr><br />
</thead><br />
<tbody><br />
<tr id="tmp"><br />
<td><input type="text" name="tmpTitle[]" value="0" /></td><br />
<td><input type="checkbox" name="tmpTitleChecked[]" value="1" /></td><br />
</tr><br />
</tbody><br />
</table><br />
<input type="submit" id="tmpAddRow" value="Add a Row" /><br />
</form><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Empty all table data==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpEmptyTable").click(<br />
function($e) {<br />
$e.preventDefault();<br />
$("td").empty();<br />
}<br />
);<br />
$("input#tmpDelete").click(<br />
function($e) {<br />
$e.preventDefault();<br />
$("h4, table").remove();<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<h4>C Albums</h4><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Year</th> <br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>D</td><br />
<td>1980</td><br />
</tr><br />
</tbody><br />
</table><br />
<input type="submit" id="tmpEmptyTable" value="Empty Table" /><br />
<input type="submit" id="tmpDelete" value="Delete Content" /><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Fade in a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("td:parent").fadeTo(1500, 0.3);<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table border="1"><br />
<tr><td>Value 1</td><td></td></tr><br />
<br />
<tr><td>Value 2</td><td></td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Finds all table cell that are empty - they don"t have child elements or text.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("td:empty").text("Was empty!").css("background", "red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td></td></tr><br />
<tr><td></td></tr><br />
</table><br />
<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Finds odd table rows, matching the second, fourth and so on==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
<br />
$("tr:odd").css("background-color", "#bbbbff");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td>Middle</td></tr><br />
<tr><td>Last</td></tr><br />
</table><br />
<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Finds the first table row.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("tr:first").css("background-color", "red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table border="1"><br />
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><br />
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><br />
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Finds the third td.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("td:eq(2)").css("color", "red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table border="1"><br />
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr><br />
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr><br />
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==If table row has table data cell==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("tr:has(td)").css("color","red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td>asdf</td></tr><br />
<tr><td>asdf</td></tr><br />
</table><br />
<br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Remove a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpEmptyTable").click(<br />
function($e) {<br />
$e.preventDefault();<br />
$("td").empty();<br />
}<br />
);<br />
$("input#tmpDelete").click(<br />
function($e) {<br />
$e.preventDefault();<br />
$("h4, table").remove();<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<h4>C Albums</h4><br />
<table><br />
<thead><br />
<tr><br />
<th>Title</th><br />
<th>Year</th> <br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>D</td><br />
<td>1980</td><br />
</tr><br />
</tbody><br />
</table><br />
<input type="submit" id="tmpEmptyTable" value="Empty Table" /><br />
<input type="submit" id="tmpDelete" value="Delete Content" /><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Strip a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("table tr:nth-child(even)").addClass("striped");<br />
});<br />
</script><br />
<style><br />
body,td {<br />
font-size: 10pt;<br />
}<br />
table {<br />
background-color: black;<br />
border: 1px black solid;<br />
border-collapse: collapse;<br />
}<br />
th {<br />
border: 1px outset silver;<br />
background-color: maroon;<br />
color: white;<br />
}<br />
tr {<br />
background-color: white;<br />
margin: 1px;<br />
}<br />
tr.striped {<br />
background-color: coral;<br />
}<br />
td {<br />
padding: 1px 8px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><br />
<th>Year</th><br />
<th>Make</th><br />
<th>Model</th><br />
</tr><br />
<tr><br />
<td>1997</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2000</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2005</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2007</td><br />
<td>Dodge</td><br />
<td>Addf</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Table data hover==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("table").hover(<br />
function() {<br />
$("td").addClass("myHover");<br />
},<br />
function() {<br />
$("td").removeClass("myHover");<br />
}<br />
)<br />
.click(<br />
function() {<br />
$("td").toggleClass("mySelected");<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
td {<br />
width: 100px;<br />
height: 100px;<br />
border: 1px solid rgb(200, 200, 200);<br />
}<br />
td.myHover {<br />
background: yellow; <br />
}<br />
td.mySelected {<br />
background: C;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tbody><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==To add a special style to table cells that are being hovered over,==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
$("td").hover(<br />
function () {<br />
$(this).addClass("hover");<br />
},<br />
function () {<br />
$(this).removeClass("hover");<br />
}<br />
);<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Toggle Strips==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("table tr:nth-child(even)").addClass("striped");<br />
<br />
});<br />
function swap() {<br />
$("tr").toggleClass("striped");<br />
} <br />
</script><br />
<style><br />
body,td {<br />
font-size: 10pt;<br />
}<br />
table {<br />
background-color: black;<br />
border: 1px black solid;<br />
border-collapse: collapse;<br />
}<br />
th {<br />
border: 1px outset silver;<br />
background-color: maroon;<br />
color: white;<br />
}<br />
tr {<br />
background-color: white;<br />
margin: 1px;<br />
}<br />
tr.striped {<br />
background-color: coral;<br />
}<br />
td {<br />
padding: 1px 8px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<body><br />
<table onmouseover="swap()" onmouseout="swap()"><br />
<tr><br />
<th>Year</th><br />
<th>Make</th><br />
<th>Model</th><br />
</tr><br />
<tr><br />
<td>1997</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2000</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2005</td><br />
<td>Chrysler</td><br />
<td>Jeep</td><br />
</tr><br />
<tr><br />
<td>2007</td><br />
<td>Dodge</td><br />
<td>Addf</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==To toggle a style on table cells:==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
jQuery Code<br />
$("td").toggle(<br />
function () {<br />
$(this).addClass("selected");<br />
},<br />
function () {<br />
$(this).removeClass("selected");<br />
}<br />
);<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use for each function to loop through table row==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#exampleTable").find("td").each(function(i, el) {<br />
var inputEl = $(el).children().get(0);<br />
$(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");<br />
})<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<table id="exampleTable"><br />
<tr><br />
<th><br />
Type<br />
</th><br />
<th><br />
Element<br />
</th><br />
</tr><br />
<tr><br />
<td><br />
<input type="button" value="Input Button"/><br />
</td><br />
</tr><br />
<tr><br />
<td><br />
<input type="checkbox" /><br />
</td><br />
</tr><br />
</table><br />
</form><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source></div>
Admin