首页 > 软件开发 > HTML >

html怎么在页面上加入增加行的按钮

来源:互联网 2023-03-16 19:15:44 448

html怎么在页面上加入增加行的按钮,实际上这里需要配合javascript,因为html是负责框架的,如果要加上一些行为动作,就需要js语言来进行运用了。dW0办公区 - 实用经验教程分享!

html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

工具/原料

  • 网页浏览器,比如chrome
  • 编辑器,例如Sublime text3

方法/步骤

  • 1

    打开Sublime text3,新建一个HTML文档,并且建立好框架。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 1该信息未经许可获取自百度经验
  • 2

    table>dW0办公区 - 实用经验教程分享!

    tr>dW0办公区 - 实用经验教程分享!

    td>Student/td>dW0办公区 - 实用经验教程分享!

    td>input type="text" name="student">/td>dW0办公区 - 实用经验教程分享!

    /tr>dW0办公区 - 实用经验教程分享!

    tr>dW0办公区 - 实用经验教程分享!

    td>Height/td>dW0办公区 - 实用经验教程分享!

    td>input type="text" name="height">/td>dW0办公区 - 实用经验教程分享!

    /tr>dW0办公区 - 实用经验教程分享!

    tr>dW0办公区 - 实用经验教程分享!

    td colspan=2>dW0办公区 - 实用经验教程分享!

    input type="button" name="add" value="add">dW0办公区 - 实用经验教程分享!

    /td>dW0办公区 - 实用经验教程分享!

    /tr>dW0办公区 - 实用经验教程分享!

    /table>dW0办公区 - 实用经验教程分享!

    现在我们设立一下两行文本输入框,并且提示可以增加的按钮。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 3

    table id="mainTable">dW0办公区 - 实用经验教程分享!

    为标签加上id方便定位。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 4

    加上监听事件的函数。dW0办公区 - 实用经验教程分享!

    onclick="adding()"dW0办公区 - 实用经验教程分享!

    然后连接js文档。dW0办公区 - 实用经验教程分享!

    script src="test.js">/script>dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 5

    function adding(){dW0办公区 - 实用经验教程分享!

    var table = document.getElementById("mainTable");dW0办公区 - 实用经验教程分享!

    var addTr = table.insertRow(2);dW0办公区 - 实用经验教程分享!

    }dW0办公区 - 实用经验教程分享!

    创建函数,然后我们设定两个变量。dW0办公区 - 实用经验教程分享!

    一个用于定位标签位置,另一个增加行数在第二行。dW0办公区 - 实用经验教程分享!

    测试一下,多次点击确实会往下移动。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 6

    var addTd = addTr.insertCell();dW0办公区 - 实用经验教程分享!

    addTd.innerHTML = "新增";dW0办公区 - 实用经验教程分享!

    dW0办公区 - 实用经验教程分享!

    dW0办公区 - 实用经验教程分享!

    除了要增加tr还要增加td,并且增加文本提示。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 7

    稍微修改一下变量名字。再增加文本输入框。dW0办公区 - 实用经验教程分享!

    function adding(){dW0办公区 - 实用经验教程分享!

    var table = document.getElementById("mainTable");dW0办公区 - 实用经验教程分享!

    var addTr = table.insertRow(2);dW0办公区 - 实用经验教程分享!

    var td1 = addTr.insertCell();dW0办公区 - 实用经验教程分享!

    td1.innerHTML = "新增";dW0办公区 - 实用经验教程分享!

    var td2 = addTr.insertCell();dW0办公区 - 实用经验教程分享!

    td2.innerHTML = "input type='text 'name='newnew' >";dW0办公区 - 实用经验教程分享!

    }dW0办公区 - 实用经验教程分享!

    这个时候就会发现点击按钮就会增加一行,多次就会多行。dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

    html怎么在页面上加入增加行的按钮dW0办公区 - 实用经验教程分享!

  • 注意事项

    • 特别要注意td和tr的关系,和创建的数量

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!dW0办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码