怎样在HTML中插入按钮

怎样在HTML中插入按钮,第1张

1、打开Sublime text3,新建一个HTML文档,并且建立好框架。

2、输入代码:

<table>

      <tr>

          <td>Student</td>

          <td><input type="text" name="student"></td>

      </tr>

      <tr>

          <td>Height</td>

          <td><input type="text" name="height"></td>

      </tr>

      <tr>

          <td colspan=2>

              <input type="button" name="add" value="add">

          </td>

      </tr>

  </table>

设立两行文本输入框,并且提示可以增加按钮

3、<table id="mainTable">

为标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

<script src="test.js"></script>

5、function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

}

创建函数,然后设定两个变量。一个用于定位标签位置,另一个增加行数在第二行。测试一下,多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

  addTd.innerHTML = "新增"

除了要增加tr还要增加td,并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

  var td1 = addTr.insertCell()

  td1.innerHTML = "新增"

  var td2 = addTr.insertCell()

  td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。

1:增加小球的业务,其逻辑我先例给你:

1.1:你说了,点击按钮,所以先写一个按钮,并绑定点击事件。

1.2:增加小球,那就必须要创建元素标签。其JS中的DOM方法是parent.createElement("div")

1.2:然后是追加给HTML文档中 方法是parent.appendChild(parent.createElement("div"))

1.3:之后就是定义样式。

2:上述中的parent,是其父级元素,在JS中创建一个元素或者删除一个元素必须要先找到其父级元素。jQuery有自删功能

3:对于以上还有哪里不明白或者有错误的地方,请追问,指正出来

4:望采纳

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<button>标签中,加入样式代码:style="background: url(small2.png)width:150pxheight:60px"。

3、浏览器运行index.html页面,此时按钮被成功添加了图片。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11897519.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存