Sử dụng javascript để tạo ra một bảng với số lượng dòng và cột tùy ý!
Thiết kế web chuyên nghiệp
Chào các bạn, thông thường khi chúng ta thiết kế web chúng ta sẽ kéo bảng từ một thanh công cụ trong các công cụ thiết kế web như Dreamview, Webexpression... hoặc code trực tiếp. Nhưng sau đây tôi xin giới thiệu các tạo ra một bảng tùy ý mà chỉ cần vài dòng Javascript.
Demo
<style type="text/css">
#show table{
border: thin #00C solid;
}
#show table tr td{
padding:5px;
border: thin #00C solid;
}
</style>
<script type="text/javascript">
function created()
{
if(col.value.length > 0 && row.value.length > 0)
{
var cot= eval(col.value);
var don= eval(row.value);
var vung= document.getElementById("show");
var bang = document.createElement("table");
for(var i=0; i< don; i++)
{
var dong= document.createElement("tr");
for(var j=0; j<cot;j++)
{
var cott= document.createElement("td");
var text=document.createTextNode(i+" "+ j);
cott.appendChild(text);
dong.appendChild(cott);
}
bang.appendChild(dong);
}
document.getElementById("show").appendChild(bang);
}
}
</script>
<body>
<form name="bang">
Số cột: <input type="text" name="col" id="col"/>
Số dòng: <input type="text" name="row" id="row" />
<input type="button" value="tạo bảng" onclick="return created();" />
</form>
<div id="show">
</div>
</body>
#show table{
border: thin #00C solid;
}
#show table tr td{
padding:5px;
border: thin #00C solid;
}
</style>
<script type="text/javascript">
function created()
{
if(col.value.length > 0 && row.value.length > 0)
{
var cot= eval(col.value);
var don= eval(row.value);
var vung= document.getElementById("show");
var bang = document.createElement("table");
for(var i=0; i< don; i++)
{
var dong= document.createElement("tr");
for(var j=0; j<cot;j++)
{
var cott= document.createElement("td");
var text=document.createTextNode(i+" "+ j);
cott.appendChild(text);
dong.appendChild(cott);
}
bang.appendChild(dong);
}
document.getElementById("show").appendChild(bang);
}
}
</script>
<body>
<form name="bang">
Số cột: <input type="text" name="col" id="col"/>
Số dòng: <input type="text" name="row" id="row" />
<input type="button" value="tạo bảng" onclick="return created();" />
</form>
<div id="show">
</div>
</body>
Kết quả:
Không có nhận xét nào:
Đăng nhận xét