javascript之表格

最新推荐文章于 2023-04-25 21:27:03 发布

车晋强

最新推荐文章于 2023-04-25 21:27:03 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/chejinqiang/article/details/44116851

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用JavaScript动态生成HTML表格，包括创建表格、修改单元格内容、响应鼠标悬停事件等，并展示了如何对数组进行排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<title></title>

</head>

<body>
<script>
//创建table对象
var tab=document.createElement("table");
tab.width=500;
tab.border=1;
tab.id="tab";
var row,cell;
for(var i=0;i<3;i++){
//为表插入行
row=tab.insertRow(-1);//参数-1表示新增的行或者列是新增在最后面
for(var j=0;j<3;j++){
cell=row.insertCell(-1);
cell.innerHTML="我是单元格"+i+"*"+j;
}
}
document.body.appendChild(tab);






</script>
</body>

</html>

<pre name="code" class="java"><html>

<head>

<title></title>

</head>

<body>
<script>
var tab=document.createElement("table");
tab.width=500;
tab.id="tab";
tab.border=2;
var row,cell;
for(var i=0;i<3;i++){
row=tab.insertRow(-1);
for(var j=0;j<3;j++){
cell=row.insertCell(-1);
cell.innerHTML="我是单元格"+i+"*"+j;}
}

document.body.appendChild(tab);
alert("查看删除效果");
tab.deleteRow(1);
alert("查看删除效果");
tab.rows[0].deleteCell(2);
</script>
</body>

</html>

<html>

<head>

<title></title>


<style>
body{
margin:0; //设置对象四边的外补丁
padding:0;//设置对象四边的内补丁
background:#000000;
color:black;//设置文本的颜色
line-height:100%;//字体的行高
}
table{
width:100%;
height:50%;
}
//定义表头所使用的背景图片
th{
font-size:200%;
font-weight:bold;
cursor:pointer;//像手形一样的样式
}
td{
background:#e5f1f4;
text-align:center;
}

</style>
</head>
<body>
<table id="sortTable" cellspacing="0" cellpadding="0" border=1>
<tr bgcolor=greenorange><th>数字</th><th>英文</th><th>汉字<th>标题</th></th></tr>
<tr><td>1</td><td>a</td><td>啊</td><td>data1</td></tr>
<tr><td>3</td><td>b</td><td>哦</td><td>data2</td></tr>
<tr><td>5</td><td>c</td><td>饿</td><td>data3</td></tr>
<tr><td>4</td><td>d</td><td>是</td><td>data4</td></tr>
</table>
<script>
var sortTable=document.getElementById("sortTable");
sortTable.onmouseover=function(e){
e=e||event;//兼容事件对象
var target=e.target||e.srcElement;//兼容事件源
if(target.tagName.toLowerCase()=='td'){
for(var i=1,l=this.rows.length;i<l;i++){
this.rows[i].cells[target.cellIndex].style.background='#bce774';
}
var cells=target.parentNode.cells;
for(var i=0,l=cells.length;i<l;i++)
cells[i].style.background='#bce774';
}
}
sortTable.onmouseout=function(e){
e=e||event;//兼容事件对象
var target=e.target||e.srcElement;//兼容事件源
if(target.tagName.toLowerCase()=='td'){
for(var i=1,l=this.rows.length;i<l;i++){
this.rows[i].cells[target.cellIndex].style.background='#e5f1f4';
}
var cells=target.parentNode.cells;
for(var i=0,l=cells.length;i<l;i++)
cells[i].style.background='#e5f1f4';
}
}









</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<script>
var numbers=[2,4,8,5,1];
alert(numbers.sort());

</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<script>
var chars=['b','c','e','x'];
alert(chars.sort());

</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<script>
var letters=['呆','啊','猜','中'];
alert(letters.sort(
function(a,b){
return a.localeCompare(b);}
));
</script>
</body>

</html>

<html>

<head>

<title></title>

</head>

<body>
<table width="500" border="1" id="tab">
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
<tr><td>我是单元格</td><td>我是单元格</td><td>我是单元格</td></tr>
</table>
<script>
var tab=document.getElementById("tab");
var rows=tab.rows.length;//获取表格的行数
var cells;
for(var i=0;i<rows;i++){
//获取当前行的单元格数 
cells=tab.rows[i].cells.length;
for(var j=0;j<cells;j++)
tab.rows[i].cells[j].innerHTML+=i+"*"+j;
}

</script>
</body>

</html>