表单提交

2022-07-22 14:12:26 作者：互联网
信息录入

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .tab1 {
    margin: 0 auto;
    text-align: center;
  }

  .inp {
    width: 120px;
    border-radius: 8px;
  }


  .tab1 tr {
    margin: 5px 0;
  }

  .title {
    color: #0000ff;
  }

  .tab2,
  .tab3 {
    margin: 30px auto;
  }

  .tab2,
  .tab3 {
    border: 1px solid #cccccc;
  }

  .tab2 .tab2_first td,
  .tab3 .tab3_frist td {
    text-align: center;
    background-color: #0000ff;
    /* width: 0px; */
    color: #ffffff;
  }

  .tab2 td,
  .tab3 td {
    color: #0000ff;
    padding: 0 10px;
  }


  button {
    background-color: #87ceeb;
    color: #000000;
    border: none;
    border-radius: 5px;
  }

  .last td button {
    margin: 0 10px;
  }



  .cz {
    width: 100px;
  }

  .cz button {
    margin: 0 5px;
  }

  input {
    width: 60px;
    text-align: center;
  }

  .submit {
    width: 50px;
    margin: 0 auto;
  }

  .selectd button {
    margin: 0 3px;
  }

  .zhangshi {
    margin: 0 auto;
    width: 500px;
  }
</style>


<!-- <input type="checkbox" name="select" id=""> -->

<body>
  <table class="tab1">
    <tr>
      <td class="title">学号:</td>
      <td><input type="text" class="inp" value=""></td>
    </tr>
    <tr>
      <td class="title">姓名:</td>
      <td><input type="text" class="inp" value=""></td>
    </tr>
    <tr>
      <td class="title">年龄:</td>
      <td><input type="text" class="inp" value=""></td>
    </tr>
    <tr>
      <td class="title">爱好:</td>
      <td><input type="text" class="inp" value=""></td>
    </tr>

    <tr>
      <td class="title">地址:</td>
      <td><input type="text" class="inp" value=""></td>
    </tr>

    <tr class="last">
      <td colspan="2"><button class="add">添加</button><button class="re">重置</button></td>
    </tr>


  </table>

  <table class="tab2">
    <tr class="tab2_first">
      <td>学号</td>
      <td>姓名</td>
      <td>年龄</td>
      <td>爱好</td>
      <td>癖好</td>
      <td>操作</td>
      <td>选中</td>
    </tr>
  </table>
  <div class="submit">
    <input type="submit" value="提交">
  </div>

  <div class="zhangshi"></div>
  <script>
    var but_add = document.querySelector('.add')
    var but_re = document.querySelector('re')
    var tab2 = document.querySelector('.tab2')
    var add = document.querySelector('.add')
    var flag = true
    var re = document.querySelector('.re')
    var arrinput = document.querySelector('.tab1').querySelectorAll('input')
    var check_select = document.querySelector('.submit').querySelector('input')
    var zhangshi = document.querySelector('.zhangshi')
    // console.log(check_select)
    // console.log(arrinput)


    // 生成一排数据 修改数据 并清空表单
    function csdata(arrinput) {
      var but2_tr = document.createElement('tr')
      tab2.appendChild(but2_tr)
      but2_tr.className = 'but2_tr'
      for (let i = 0; i < arrinput.length; i++) {
        let but2_td = document.createElement('td')
        but2_tr.appendChild(but2_td)
        but2_td.innerHTML = arrinput[i].value
        arrinput[i].value = ''
      }

      // 操作
      let but2_td = document.createElement('td')
      but2_tr.appendChild(but2_td)
      but2_td.className = 'cz'


      // 元素选中提交
      let selectd = document.createElement('td')
      but2_tr.appendChild(selectd)
      selectd.className = 'selectd'
      selectd.innerHTML = `<input type="checkbox" name="select" id="">`



      // 创建元素
      let xiugai = document.createElement('button')
      but2_td.appendChild(xiugai)
      xiugai.className = 'xiugai'
      xiugai.innerHTML = '修改'

      let delede = document.createElement('button')
      but2_td.appendChild(delede)
      delede.className = 'delede'
      delede.innerHTML = '删除'

      // 删除
      delede.onclick = function () {
        this.parentNode.parentNode.remove()
      }

      // 修改
      let tag = true
      xiugai.onclick = function () {
        let tdlist = this.parentNode.parentNode.querySelectorAll('td')
        let inputlist = this.parentNode.parentNode.querySelectorAll('input')

        if (tag) {
          for (let i = 0; i < 5; i++) {
            let values = tdlist[i].innerHTML
            tdlist[i].innerHTML = ''
            let input = document.createElement('input')
            tdlist[i].appendChild(input)
            input.value = values
          }
          this.innerHTML = '确定'
          tag = !tag
        } else {
          for (let i = 0; i < 5; i++) {
            tdlist[i].innerHTML = inputlist[i].value
          }
          this.innerHTML = '修改'
          tag = !tag
        }
      }
    }

    // 点击事件 获取表单里面的信息修改 并且清空表单 
    add.onclick = function () {
      csdata(arrinput)

    }


    // 重置功能
    re.onclick = function () {
      let arr2list = document.querySelector('.tab2').querySelectorAll('tr')
      for (let i = 1; i < arr2list.length; i++) {
        arr2list[i].innerHTML = ''
      }
    }

    check_select.onclick = function () {
      zhangshi.innerHTML = `<table class="tab3">
<tr class="tab3_frist">
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>癖好</td>
    </tr>
    </table>`

      let tab3 = document.querySelector('.zhangshi .tab3')
      var checkinputlist = document.querySelectorAll('.but2_tr .selectd input')
      console.log(checkinputlist[0].checked)
      for (let i = 0; i < checkinputlist.length; i++) {
        if (checkinputlist[i].checked) {
          let logss = checkinputlist[i].parentElement.parentElement
          logss.querySelector('.cz').remove()
          checkinputlist[i].parentElement.remove()
          let tab3_tr = document.createElement('tr')
          tab3.appendChild(tab3_tr)
          console.log(logss)
          tab3_tr.innerHTML = logss.innerHTML
        }
      }
    }
  </script>
效果图
添加
提交之后选中提交后自动生成一个新的表单
标签：tr,innerHTML,表单,but2,let,提交,td,document
来源： https://www.cnblogs.com/shuilifang/p/16505440.html