<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0pxpadding: 0pxlist-style: nonetext-decoration: none}/*通配符，个人习惯*/
#btn{background: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)width: 540pxheight: 258px}
</style>
</head>
<body>
<h1>button按钮的背景是图片</h1>
<button id="btn"></button>
</body>
</html>
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、最后就可以看到按钮了。
这个不怎么难啊，看下面代码<html>
<head>
<title>File</title>
<style type="text/css">
#infile {visibility: hidden}
input {font-family: Verdanafont-size: 9pt}
</style>
<script language="JavaScript">
function changeName()
{
var f = document.getElementById("filename")
f.value = document.getElementById("infile").value
}
function openFile()
{
document.getElementById("infile").click()
}
</script>
</head>
<body>
<input type="file" id="infile" onChange="changeName()" />
<input type="text" id="filename" size="50" maxlength="50" />
<a href="javascript: openFile()"><img src="***.jpg" border="0" /></a>
</body>
</html>
原理：
点击图片链接时，触发打开文件框，如果file框里的内容改变时，把file框里的内容传到文本框。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）