Skip to content

Instantly share code, notes, and snippets.

@tony1223

tony1223/sample.html

Created April 20, 2013 06:29
Show Gist options
  • Save tony1223/5424998 to your computer and use it in GitHub Desktop.
Save tony1223/5424998 to your computer and use it in GitHub Desktop.
Download ZIP
prototype practice sample
Raw
sample.html
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="test" value="clickme" />
<div id="output" ></div>
<table id="test_table">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
<tr><td>test6</td></tr>
<tr><td>test7</td></tr>
<tr><td>test8</td></tr>
</table>
<table id="test_table2">
<tr><td>test1_2</td></tr>
<tr><td>test2_2</td></tr>
<tr><td>test3_2</td></tr>
<tr><td>test4_2</td></tr>
<tr><td>test5_2</td></tr>
<tr><td>test6_2</td></tr>
<tr><td>test7_2</td></tr>
<tr><td>test8_2</td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script>
//Type1
function ColorTable(table_dom){
$("tr",table_dom).each(function(){
var color = parseInt(Math.random()*255 ,10)+","+parseInt(Math.random()*255 ,10)+","+
parseInt(Math.random()*255 ,10);
$(this).css("background","RGB("+color+")");
});
}
function AddTableRow(table_dom,text_ary){
$(table_dom).append("<tr><td>"+text+"</td></tr>");
}
function DelTableRow(table_dom,index){
$(table_dom).find("tr").eq(index).remove();
}
// ColorTable($("#test_table")[0]);
// AddTableRow($("#test_table")[0],"added row");
// ColorTable($("#test_table")[0]);
// DelTableRow($("#test_table")[0],0);
//Type2
var MyTable = function(/*table*/dom){
return {
_dom:dom,
color:function(){
$("tr",this._dom).each(function(){
var color = parseInt(Math.random()*255 ,10)+","+parseInt(Math.random()*255 ,10)+","+
parseInt(Math.random()*255 ,10);
$(this).css("background","RGB("+color+")");
});
},
addRow:function(text){
$(this._dom).append("<tr><td>"+text+"</td></tr>");
},
delRow:function(index){
$(this._dom).find("tr").eq(index).remove();
}
};
};
// var table = MyTable($("#test_table")[0]);
// table.color();
// table.addRow("added row");
// table.color();
// table.delRow(0);
// var table2 = MyTable($("#test_table2")[0]);
// table2.color();
// table2.addRow("added row");
// table2.color();
// table2.delRow(0);
// console.log(table.color);
// console.log(table2.color);
// console.log(table.color == table2.color);
//Type3
var MyTableClass = function(dom){
this._dom = dom; //{}
}
MyTableClass.prototype = {
_dom:null,
color:function(){},
addRow:function(){},
delRow:function(){},
constructor:MyTableClass.prototype.constructor
};
MyTableClass.prototype._dom = null;
MyTableClass.prototype.color = function(){
$("tr",this._dom).each(function(){
var color = parseInt(Math.random()*255 ,10)+","+parseInt(Math.random()*255 ,10)+","+
parseInt(Math.random()*255 ,10);
$(this).css("background","RGB("+color+")");
});
};
MyTableClass.prototype.addRow = function(text){
$(this._dom).append("<tr><td>"+text+"</td></tr>");
};
MyTableClass.prototype.delRow = function(index){
$(this._dom).find("tr").eq(index).remove();
};
var table = new MyTableClass($("#test_table")[0]);
table.color();
table.addRow("added row");
table.color();
table.delRow(0);
var table2 = new MyTableClass($("#test_table2")[0]);
table2.color();
table2.addRow("added row");
table2.color();
table2.delRow(0);
console.log(table.color);
console.log(table2.color);
console.log(table.color == table2.color);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment