작업을 하다 보면 table 을 건드리는 경우가 많다..
아래와 같이 처리 하는걸 생각 해 보자
<!doctype html>
<html>
<head>
<title>jQuery Table Manupulation Example by Mulder</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<style type="text/css">
<!--
#tableA {
border-collapse: collapse;
width: 600px;
}
#tableA th,
#tableA td
{
border: 1px solid #000;
padding: 3px;
}
#tableA tr.highlight {
background-color: #eee;
}
#tableA tr.selected {
background-color: #faa;
}
//-->
</style>
<script type="text/javascript">
$(document).ready(function() {
tblAddData ("#main00", ["111","111","333","444"]);
$('#tableA input').each(function() {
//showAllProperties( this );
if($(this).attr("id") == 'btnAdd') {
$(this).click(function() {
tblAddData ("#main00", ["111","111","333","444"]);
});
}
else if($(this).attr("id") == 'btnDel') {
$(this).click(function() {
var tr_len = $( "#main00 tr" ).length;
var loopidx = 0;
$( "#main00 tr" ).each(function() {
if(++loopidx == tr_len) $(this).remove(); // remove last row
});
});
}
});
$("#tableA tbody tr").hover(
function()
{
$(this).addClass("highlight");
},
function()
{
$(this).removeClass("highlight");
}
//}
);
$("#tableA tr").click(function(){
if($(this).hasClass("selected")) $(this).removeClass("selected");
else $(this).addClass("selected");
}
);
});
// 손쉽게 object 의 attribute 를 프린트 해 볼 수 있다.
function showAllProperties (o) {
var s;
var idx = 0;
for(att in o){
s += "[" + att + ":" +o[att] + "]";
if(++idx % 5 == 0) s += "\r\n";
}
alert (s);
}
var gx_tr_idx = 0;
function tblAddData (tblId, d) {
var xtr = $("<tr>");
++gx_tr_idx;
for(var i=0; i<d.length; i++) {
var xtd = $("<td>");
xtd.html( gx_tr_idx + "." + d[i] );
xtr.append( xtd );
}
$(tblId).find("tbody").append ( xtr );
$("#tableA tbody tr").hover(
//if(!$(this).hasClass("selected")) {
function()
{
$(this).addClass("highlight");
},
function()
{
$(this).removeClass("highlight");
}
//}
);
$("#tableA tbody tr").click(
function(event)
{
if($(this).hasClass("selected")) $(this).removeClass("selected");
else $(this).addClass("selected");
//alert (1)
}
);
}
</script>
</head>
<body>
<div id="tableA">
<table id="main00">
<thead></thead>
<tbody></tbody>
</table>
<p><input id="btnAdd" type="button" value="add"/> <input id="btnDel" type="button" value="del"/></p>
</div>
</body>
</html>
아래와 같이 처리 하는걸 생각 해 보자
<!doctype html>
<html>
<head>
<title>jQuery Table Manupulation Example by Mulder</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<style type="text/css">
<!--
#tableA {
border-collapse: collapse;
width: 600px;
}
#tableA th,
#tableA td
{
border: 1px solid #000;
padding: 3px;
}
#tableA tr.highlight {
background-color: #eee;
}
#tableA tr.selected {
background-color: #faa;
}
//-->
</style>
<script type="text/javascript">
$(document).ready(function() {
tblAddData ("#main00", ["111","111","333","444"]);
$('#tableA input').each(function() {
//showAllProperties( this );
if($(this).attr("id") == 'btnAdd') {
$(this).click(function() {
tblAddData ("#main00", ["111","111","333","444"]);
});
}
else if($(this).attr("id") == 'btnDel') {
$(this).click(function() {
var tr_len = $( "#main00 tr" ).length;
var loopidx = 0;
$( "#main00 tr" ).each(function() {
if(++loopidx == tr_len) $(this).remove(); // remove last row
});
});
}
});
$("#tableA tbody tr").hover(
function()
{
$(this).addClass("highlight");
},
function()
{
$(this).removeClass("highlight");
}
//}
);
$("#tableA tr").click(function(){
if($(this).hasClass("selected")) $(this).removeClass("selected");
else $(this).addClass("selected");
}
);
});
// 손쉽게 object 의 attribute 를 프린트 해 볼 수 있다.
function showAllProperties (o) {
var s;
var idx = 0;
for(att in o){
s += "[" + att + ":" +o[att] + "]";
if(++idx % 5 == 0) s += "\r\n";
}
alert (s);
}
var gx_tr_idx = 0;
function tblAddData (tblId, d) {
var xtr = $("<tr>");
++gx_tr_idx;
for(var i=0; i<d.length; i++) {
var xtd = $("<td>");
xtd.html( gx_tr_idx + "." + d[i] );
xtr.append( xtd );
}
$(tblId).find("tbody").append ( xtr );
$("#tableA tbody tr").hover(
//if(!$(this).hasClass("selected")) {
function()
{
$(this).addClass("highlight");
},
function()
{
$(this).removeClass("highlight");
}
//}
);
$("#tableA tbody tr").click(
function(event)
{
if($(this).hasClass("selected")) $(this).removeClass("selected");
else $(this).addClass("selected");
//alert (1)
}
);
}
</script>
</head>
<body>
<div id="tableA">
<table id="main00">
<thead></thead>
<tbody></tbody>
</table>
<p><input id="btnAdd" type="button" value="add"/> <input id="btnDel" type="button" value="del"/></p>
</div>
</body>
</html>