html 表格练习

最新推荐文章于 2023-12-13 17:34:42 发布
最新推荐文章于 2023-12-13 17:34:42 发布
阅读量343 收藏
点赞数
分类专栏： HTML.
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35860368/article/details/53679643
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>
<p>
    <input type="button" name="Submit" value="刷新" οnclick="onRefresh()" />
    <input type="button" name="Submit2" value="全选"  οnclick="selectall()"/>
    <input type="button" name="Submit8" value="反选" οnclick="inverse()" />
    <input type="button" name="Submit3" value="不选" οnclick="noselect()"/>
    <input type="button" name="Submit4" value="添加行与列" οnclick="insert_row()" />
    <input type="button" name="Submit7" value="删除选择" οnclick="delRow()" />
    <input type="button" name="Submit5" value="拷贝选择" οnclick="copyRow()"/>
    <input type="button" name="Submit92" value="居中对齐"  οnclick="tableAlign()"/>
    <input type="button" name="Submit922" value="隔行变色"  οnclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">
    <tr>
        <td width="7%"> <input type="checkbox" name="checkbox" value="checkbox" checked> </td>
        <td width="51%">1</td>
        <td width="14%">1</td>
        <td width="14%">1</td>
        <td width="14%">1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox2" value="checkbox" checked="checked" /></td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox3" value="checkbox"checked  /></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox4" value="checkbox" checked /></td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox5" value="checkbox" checked /></td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox6" value="checkbox" checked /></td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>56</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox7" value="checkbox" checked /></td>
        <td>777</td>
        <td>7</td>
        <td>77</td>
        <td>7</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox8" value="checkbox" checked /></td>
        <td>88</td>
        <td>8</td>
        <td>88</td>
        <td>77</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox9" value="checkbox" checked /></td>
        <td>999</td>
        <td>99</td>
        <td>99</td>
        <td>999</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox10" value="checkbox" checked /></td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
    </tr>
</table>
<br />
<p></p>

<script>
    var otable = document.getElementById("myTable");
    var inparry = otable.getElementsByTagName("input");

    function selectall(){
        for(var i=0;i<inparry.length;i++){
            inparry[i].checked = true;
        }
    }
    function inverse(){
        for(var i=0;i<inparry.length;i++){
            if(inparry[i].checked == true){
                inparry[i].checked = false;
            }else{
                inparry[i].checked = true;
            }
        }
    }
    function noselect(){
        for(var i=0;i<inparry.length;i++){
            inparry[i].checked = false;
        }
    }

    function insert_row(){
        var tableLength = otable.rows.length;
        var otr = otable.insertRow(tableLength);

        var num1 = prompt("请输入第一列数");
        var num2 = prompt("请输入第二列数");
        var num3 = prompt("请输入第三列数");
        var num4 = prompt("请输入第四列数");

        var otd = otr.insertCell(0);
        var nodeText = document.createElement("input");
        nodeText.type="checkbox";
        nodeText.name="checkbox10";
        nodeText.value="checkbox";
        otd.appendChild(nodeText);

        var otd1 = otr.insertCell(1);
        var nodeText1 = document.createTextNode(num1);
        otd1.appendChild(nodeText1);

        var otd2 = otr.insertCell(2);
        var nodeText2 = document.createTextNode(num2);
        otd2.appendChild(nodeText2);

        var otd3 = otr.insertCell(3);
        var nodeText3 = document.createTextNode(num3);
        otd3.appendChild(nodeText3);

        var otd4 = otr.insertCell(4);
        var nodeText4 = document.createTextNode(num4);
        otd4.appendChild(nodeText4)
    }
    function delRow(){
        for(var i=0;i<inparry.length;i++){
            var boo1 = inparry[i].checked;
            console.info(boo1);
            if(boo1){
                otable.deleteRow(i);
                i--;
            }
        }
    }
    function copyRow(){
        var length = inparry.length
        for(var i=0;i< length;i++){
            var boo2 = inparry[i].checked;
            if(boo2){
                inparry[i].checked =false;
                var td1 = inparry[i].parentNode;
                var tr1 = td1.parentNode;

                var newtr = tr1.cloneNode(true);
                myTable.appendChild(newtr);
            }
        }
    }
    function tableAlign(){
        var length = inparry.length;
        for(var i=0;i< length;i++){
            if(inparry[i].checked){
                var tr2 = inparry[i].parentNode.parentNode;
                tr2.style.textAlign="center";
            }
        }
    }

    function changeColor(){
        for(var i=0;i< inparry.length;i+=2){
            var tr3 = inparry[i].parentNode.parentNode;
            tr3.style.backgroundColor = "gray"
        }
    }
</script>

</body>
</html>

噢啦噢啦噢啦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table.html（html表格练习）
07-21
html5简单的项目支出表格作业，表内容为 项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备...
HTML 表格及练习
weixin_51559599的博客
10-17 945
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
HTML表格列表表单练习
最新发布
2301_80121720的博客
12-13 418
【代码】HTML表格列表表单练习。
Day02 HTML制作表格以及练习
Libe2ty的博客
10-20 858
HTML 制作表格 table标签：表格标签 tr标签：表格中的行 th标签:表格的表头 默认居中 td标签：表格单元格 默认左并齐 cellpadding="数字"填充外边框 cellspacing=“数字” 填充表格间距 bgcolor 背景颜色 align 水平调节位置 valign 竖直调节距离 colspan=“合并单元格数” 跨列(行) 填充单元格 columnspan rowspan=“合并单元格数” 跨行(列) 填充单元格 rowspan 快捷添加x行y列个单元格:table>tr
表格练习HTML5
LaoXieyyds的博客
07-19 522
个人简历表格建立
【前端作业系列】HTML基础点 ， 训练表格（2022年6月17日作业）
08-13 840
【前端作业系列】HTML基础点 ， 训练表格（2022年6月17日作业）
表格练习.html
09-14
表格练习.html
html小练习.docx
08-27
HTML 小练习文档解读 本文档旨在指导初学者掌握 HTML 基础知识，并通过实践练习熟悉 HTML 编程。本文档共分为四页，涵盖 HTML 基础概念、表单设计、图片显示、样式设置等内容。 页 1：块级元素、内联元素和内联块...
html练习
02-22
这个"html练习"的压缩包很可能是为了帮助学习者提升HTML技能而设计的一系列实践项目或练习。下面，我们将深入探讨HTML的基本概念、常用标签以及如何通过练习来提升HTML能力。 HTML由一系列元素组成，每个元素都是...
table_basics：通过HTML CSS进行表格练习
02-11
综上所述，"table_basics"练习将带你深入了解HTML和CSS在创建和美化表格方面的应用。通过这个练习，你会学到如何构建基本的表格结构，以及如何用CSS对其进行美化和自定义，从而提升网页设计能力。在"table_basics-...
html练习.zip
07-25
其中部分文件为自己建立的，是自己在学习HTML知识时做的练习，部分文件下载自siki学院的学习资料，仅供学习参考
html表单小练习
10-16
html表单小练习，各种表单类型，本人自己做的小练习，对初学者有作用
HTML【第三节：表格/表单练习】
尽欢的博客
03-28 413
表格系列标签练习、表单系列标签练习
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2513
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML学习笔记3（列表练习）
YanMCui的博客
06-02 95
历程1历程2描述：描述：坤技名称二段释放三段释放第二章第二章
2.html标准表格练习
weixin_42666092的博客
12-23 391
表格组成table/caption/ thead/tbody/tfoot tr、td/th colspan和并列 rowspan合并行 <table border="1" cellspacing="0" width="830px" hight="290px"> <caption><b>（外部）分包工程核算单</b> </caption> <thead> <!-- 表头 三行十一列 -->
HTML-表格练习题
m0_49368215的博客
05-12 606
初学小白训练集
【HTML】表格练习
点滴记忆
03-12 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
html表单+表格的练习
m0_57519583的博客
02-27 286
html表单+表格的小练习
HTML制作表格ppt课件.ppt
11-12
HTML制作表格是网页设计中常见的...通过不断练习和实践，我们可以熟练掌握表格的制作方法，为自己的网页设计和开发技能增添一份新的技术支持。愿大家都能在HTML制作表格这一技术中有所收获，创作出更加精彩的网页内容！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值