我们来用原装js来实现一个简单的表格内容添加
html代码
<body> <table border="1" width="200" height="30" id="table"> <tbody id="tb"> <tr> <td>青椒肉丝</td> <td>很好吃</td> </tr> </tbody> </table> <div id="nc"> <span>昵称:</span><input type="text" value="" id="txt"> </div> <div> <textarea name="" id="text" cols="30" rows="10"></textarea> <input type="button" value="添加" id="btn"> </div> </body>css代码
<style> tr{ text-align: center; } #table{ margin-bottom: 20px; } #nc{ margin-bottom: 20px; } </style>js引用代码
// 通过id名获取的元素 function my$(id) { return document.getElementById(id); } //通过标签名获取的元素 function ele$(element) { return document.getElementsByTagName(element); }js代码
window.onload=function(){ var btn=my$("btn"); btn.onclick=function(){ var name=my$("txt").value; var ping=my$("text").value; var tr=document.createElement("tr"); tr.innerHTML="<td>"+name+"</td>"+ "<td>"+ping+"</td>"; var table=my$("table"); var tbody=table.getElementsByTagName("tbody")[0]; tbody.appendChild(tr); } } </script>