Web小练习-DOM练习,表格行和列的添加,修改指定单元格数据和获取指定行数据

原创 2017年07月13日 09:42:20

练习:
添加三个按钮,三个输入框,一个表格,一个下拉列表。

需求:

  1. 第一个按钮点击增加表格的行,第二个按钮点击增加表格的列
  2. 第一个输入框输入要修改内容的单元格的行数,第二个输入框输入要修改内容的单元格的列数,第三个输入框输入要修改的值
  3. 第三个按钮为确认按钮,将三个输入框的数据校验后修改表格的值
  4. 点击表格,将所点击的单元格所在的行的数据传入到下拉列中

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM练习</title>
</head>
<body>
<div id="mainBody">
    <input type="button" value="增加一行" onclick="addRow()">
    <input type="button" value="增加一列" onclick="addColumn()"><br>
    输入行:<input type="text" id="rows" maxlength="3"><br>
    输入列:<input type="text" id="column" maxlength="3"><br>
    输入值:<input type="text" id="data"><br>
    <input type="button" value="确认" onclick="check()"><br>
    <table id="newTab" border="2"></table><br>
    <select id="copyRow"></select>
</div>
<script>
    //定义获取的行数
    var rowNumber;

    //增加行
    function addRow() {
        var tab=document.getElementById("newTab")
        var tr=document.createElement("tr");
        if(tab.rows.length==0){
            tr.id=0;
            var td=document.createElement("td");
            //赋值
            td.innerHTML="(1,1)";
            tr.appendChild(td);
            tab.appendChild(tr);
        }else {
            tr.id=tab.rows.length;
            //获取列数
            var colNum = tab.rows[0].cells.length;
            for (var i = 0; i < colNum; i++) {
                var td = document.createElement("td");
                //单元格赋值
                td.innerHTML = "("+(tab.rows.length+1) +","+(i+1)+ ")";
                tr.appendChild(td);
            }
        }
        //添加点击方法
        tr.onclick=function(oEvent){
            if(window.event){
                oEvent=window.event;
            }
            rowNumber=this.id;
            getRow();
        };
        tab.appendChild(tr);
    }

    //添加列
    function addColumn(){
        var tab=document.getElementById("newTab");
        if(tab.rows.length==0){
            var tr=document.createElement("tr");
            var td=document.createElement("td");
            //赋值
            td.innerHTML="(1,1)";
            tr.id=0;
            tr.appendChild(td);
            //添加点击方法
            tr.onclick=function(oEvent){
                if(window.event){
                    oEvent=window.event;
                }
                rowNumber=this.id;
                getRow();
            };
            tab.appendChild(tr);
        }else{
            //获取行数
            var rowNum =tab.rows.length;
            //获取列数
            var colNum=tab.rows[0].cells.length+1;
            for(var i=0;i<rowNum;i++){
                var td=document.createElement("td");
                //赋值
                td.innerHTML="("+(i+1)+","+colNum+")";
                tab.rows[i].appendChild(td);
            }
        }
    }

    //确认按钮
    function check(){
        var tab = document.getElementById("newTab");
        if(tab.rows.length==0){
            alert("请添加表格");
            return;
        }
        var row=document.getElementById("rows").value;
        var column=document.getElementById("column").value;
        var data=document.getElementById("data").value;

        if(row<0||column<0){
            alert("请输入大于0的整数");
            return;
        }
        if(isNaN(row)||isNaN(column)||parseInt(row)!=row||parseInt(column)!=column){
            alert("请输入整数");
            return;
        }else{
            tab.rows[row-1].cells[column-1].innerHTML=data;
        }
        if(tab.rows.length<row||tab.rows[0].cells.length<column){
               alert("表格不够");
           }
    }

    //获得指定行的数据
    function getRow(){
        var tab=document.getElementById("newTab");
        var  copyRow =document.getElementById("copyRow");
        copyRow.options.length=null;
        var rows=tab.rows[rowNumber].cells;
        for(var i=0;i<rows.length;i++){
            var op=document.createElement("option");
            op.innerHTML=rows[i].innerHTML;
            op.id=i;
            copyRow.appendChild(op);
        }
    }
</script>
</body>
</html>

如果有错误或是可以改进的地方,请各位大神指点。

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript实现动态添加页面的表格行数并获取数据

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。 车型 数量 ...
  • YEN_CSDN
  • YEN_CSDN
  • 2017年02月13日 18:04
  • 3654

VBA 从一个excel读取特定行,列到指定excel

Private Function splitExcelName(row, myFileName) As String 'This function will get task ID, subtask...
  • shibixiao
  • shibixiao
  • 2013年09月09日 14:30
  • 4892

js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)

***************************************************************** js动态添加表的列,并在列中添加控件的方法 添加行 func...
  • judyge
  • judyge
  • 2015年12月13日 13:44
  • 1630

js动态删除table表的指定行和列

javascript删除行和列 function deleteCol(obj){ var index=obj.cellIndex; var table = document.getE...
  • Touatou
  • Touatou
  • 2017年05月23日 10:46
  • 800

获取table表格每行每列的数据

在线展示 F12打开开发人员工具查看console内容 表格数据: 获取表格每行每列数据:html: ...
  • erdouzhang
  • erdouzhang
  • 2017年04月25日 08:51
  • 1905

[已解决] jquery只能取得表格的第一行的第一个单元格数值

$(document).ready(function(){  //这个点击一次,会循环打印出其他的id $("button").click(function(){ $("table tr").eac...
  • voilethht
  • voilethht
  • 2015年08月23日 22:45
  • 1866

table根据表格内的元素改变行颜色的javascript实现

本例要实现的功能是根据表格第四列的数值划分的区间,分别赋予相应行以不同的颜色。 js function co(){ var table = document.getEl...
  • IqqIqqIqqIqq
  • IqqIqqIqqIqq
  • 2016年07月08日 10:33
  • 1955

JS@DOM:向表格中动态添加行显示信息,做到滚动效果

最近在学习D3,很多时候都用到了表格,并且在js中动态地添加和删除表格,在这里总结一下js关于表格的操作: 首先要知道,js中没有提供关于列的操作,所以关于列的操作只能通过操作行来实现,比如获得列的数...
  • qq542369628
  • qq542369628
  • 2015年06月15日 18:22
  • 2070

shell awk读取文件中的指定行的指定字段

1.awk功能和实用形式 awk指定读取文件中的某一行的某个字段 awk      可以设置条件来输出文件中m行到n行中每行的指定的k字段,使用格式如下 awk    ‘NR==m,...
  • huangjin0507
  • huangjin0507
  • 2015年05月06日 18:43
  • 4429

jquery选择某一行某一列

function Match() { /* lvdelu 1.4号修改 ajax局部刷新 */ var milasUrl={};//新建对象,用来存储所有数据 var subMila...
  • lv836735240
  • lv836735240
  • 2015年01月06日 09:34
  • 2236
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web小练习-DOM练习,表格行和列的添加,修改指定单元格数据和获取指定行数据
举报原因:
原因补充:

(最多只允许输入30个字)