<html>
<script type="text/javascript">
function onloads(){
}
function $(id){
return document.getElementById(id);
}
function $c(tag){
return document.createElement(tag);
}
//封装组合对象的方法
function createObj(){
//添加一个tr
var tr=document.createElement("tr");
for(var i=0; i<4;i++){
var td = $c("td");
//添加填充内容
var input = $c("input");
input.setAttribute("type","text");
td.appendChild(input);
//设置内容
//组合tr
tr.appendChild(td);
}
return tr;
}
function addRow(){
var vtable = $("addTable");
//根据当前的列数来添加td
var tr =createObj();
//组合table
vtable.appendChild(tr);
}
function deleteRow(){
var vtable = $("addTable");
vtable.removeChild(vtable.lastChild);
}
function insertRow(){
var vtable =$("addTable");
var counts = prompt("请输入你要插入的行号：");
if(counts!=null&&counts!==""){
var num = parseInt(counts);
//获取该序列的下的节点
var currentNode = vtable.childNodes[num+1];
if(currentNode==null){
alert("你输入了无效的行号，请重新输入：");
}
var tr =createObj();
vtable.insertBefore(tr,currentNode);
}else{
alert("请输入你要插入的序号：");
}
}
</script>
<head></head>
<style type="text/css">
table{
border:1 solid red;
cellspcing:0px;
cellpadding:0px;
}
td{
border :1px solid red
}
</style>
<body οnlοad="onloads();">
<!-- 自定义的属性值来标示列的数量 -->
<table id="addTable" name="4">
<caption>动态加载单元表格</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>出生地址</td>
<td>其他</td>
</tr>
<tr>
<td>1</td>
<td>邵旭</td>
<td>河南南阳</td>
<td>笑一笑</td>
</tr>
</table>
<input type="button" value="添加一行" οnclick="addRow()"/>
<input type="button" value="删除一行" οnclick="deleteRow()"/>
<input type="button" value="插入到指定行" οnclick="insertRow()"/>
</body>
<div>
</div>
</html>
<script type="text/javascript">
function onloads(){
}
function $(id){
return document.getElementById(id);
}
function $c(tag){
return document.createElement(tag);
}
//封装组合对象的方法
function createObj(){
//添加一个tr
var tr=document.createElement("tr");
for(var i=0; i<4;i++){
var td = $c("td");
//添加填充内容
var input = $c("input");
input.setAttribute("type","text");
td.appendChild(input);
//设置内容
//组合tr
tr.appendChild(td);
}
return tr;
}
function addRow(){
var vtable = $("addTable");
//根据当前的列数来添加td
var tr =createObj();
//组合table
vtable.appendChild(tr);
}
function deleteRow(){
var vtable = $("addTable");
vtable.removeChild(vtable.lastChild);
}
function insertRow(){
var vtable =$("addTable");
var counts = prompt("请输入你要插入的行号：");
if(counts!=null&&counts!==""){
var num = parseInt(counts);
//获取该序列的下的节点
var currentNode = vtable.childNodes[num+1];
if(currentNode==null){
alert("你输入了无效的行号，请重新输入：");
}
var tr =createObj();
vtable.insertBefore(tr,currentNode);
}else{
alert("请输入你要插入的序号：");
}
}
</script>
<head></head>
<style type="text/css">
table{
border:1 solid red;
cellspcing:0px;
cellpadding:0px;
}
td{
border :1px solid red
}
</style>
<body οnlοad="onloads();">
<!-- 自定义的属性值来标示列的数量 -->
<table id="addTable" name="4">
<caption>动态加载单元表格</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>出生地址</td>
<td>其他</td>
</tr>
<tr>
<td>1</td>
<td>邵旭</td>
<td>河南南阳</td>
<td>笑一笑</td>
</tr>
</table>
<input type="button" value="添加一行" οnclick="addRow()"/>
<input type="button" value="删除一行" οnclick="deleteRow()"/>
<input type="button" value="插入到指定行" οnclick="insertRow()"/>
</body>
<div>
</div>
</html>
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
