通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里

淩亂°似流年 2021-09-25 07:46 362阅读 0赞

## 本人公众号上线啦！！！ ##

公众号与博客名一样：**没有腹肌的程序猿**  
公众号文章类型：工作上所遇到的需求实现方案分享。  
此外也会提供一些数据集供大家使用。（这个还在规划中，毕竟打工人时间挺紧的，哈哈哈哈）  
到时候也会不定期给大家抽一些小东西哦。

# 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里 #

## 需求分析: ##

*  ### 使用JS动态生成Table表格、input框、button按钮 ###
 *  ### 通过input框、button按钮实现查询。 ###
 *  ### 将查询后的结果动态填写在table里面。 ###

## 实现的效果 ##

通过点击测试按钮生成下面的表格和其他组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70 1]

## 需求实现 ##

### 1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数 ###

### 2.编写生成表格的函数 ###

### 3.编写生成input框函数 ###

//原理跟生成table是差不多的
    var input = document.createElement("input");
    input.className = "searchVisit"; 
    input.id = "searchVisit"; 
    //然后记得将input放到页面上 div怎么来的参考上面的table
    div.appendChild(input); 
    //获取input框的值,得确保页面已经生成input框.
    var searchValue = document.getElementById("searchVisit").value;

### 4.编写生成button按钮 ###

var button = document.createElement("button");
    div.appendChild(button); 
    //这一步骤是给button按钮里面添加文字.
    var t=document.createTextNode("查询");
    button.appendChild(t);
    //button的点击事件
    button.onclick = function(){ 
        //函数执行的内容.
        ..............
        //执行查询完后 将查询到的值添加到table表格中
        //首先通过getElementById拿到表格
        var table = document.getElementById("visitInfoTable");
        //获取到每一个小格子
        //这个是第一行第二个格子
        var td1=table.getElementsByTagName("tr").item(0).getElementsByTagName("td").item(1);
    	//这个是第二行第二个格子
        var td2=table.getElementsByTagName("tr").item(1).getElementsByTagName("td").item(1);
    	//这个是第三行第二个格子
        var td3=table.getElementsByTagName("tr").item(2).getElementsByTagName("td").item(1);
    	//这个是第四行第二个格子
        var td4=table.getElementsByTagName("tr").item(3).getElementsByTagName("td").item(1);
    	//这个是第五行第二个格子
        var td5=table.getElementsByTagName("tr").item(4).getElementsByTagName("td").item(1);
    	//给格子赋值 
        td1.innerHTML = "格子的内容";
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210422144925967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70 1]: /images/20210923/2d2f78a239664861b2321aa2787b4d87.png