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

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

需求:

  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>

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Oliver_W/article/details/75043662
文章标签: web
个人分类: web
上一篇Web小练习-简单的二级联动
下一篇Web小练习-JavaScript事件的简单练习,监听鼠标的移动
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭