柔軟なフォーム----リアライズ(行のデータ削除を追加)を作るためにはJavaScriptを使用して、

まず、この方法を使用しました:
ID取得素子1の方法:文書.getElementById( "");
2.のTagNameによる素子得る方法:文書.getElementsByTagNameを(「」)。
3.要素を作成する方法は:.createElenmentを(「」)ドキュメント。
4.テキスト・ノードを作成する方法は:.createTextNode(「」)または(オブジェクト)ドキュメント
5.子ノードを追加します:オブジェクト名のappendChild(オブジェクト名)
6.現在のオブジェクトのメソッドの親ノードを取得:オブジェクト名を.parentNode
注意:あなたは、親ノードを取得しなければならなかった場合:オブジェクト名のparentNode .parentNode ...........
7.子ノードのアプローチを削除します:親ノード名.removeChild(子ノード名)
8要素の設定方法は、属性:のsetAttribute(「属性名」、「属性値」)
9.エレメント結合イベント、とき括弧内の引数を有することができると呼ばれる関数、:onclickの=「楽しい(本)」
注意:これは現在のオブジェクトを参照します
 
第二に、コードの実装
<!DOCTYPE HTML >
< HTML LANG = "EN" >
< ヘッド>
< メタ文字セット= "UTF-8" >
<title>添加</title>
<style>
<!--给表格设置样式-->
table{
text-align: center;
}
</style>
</head>
<body>
<div>
编号<input type="text" id="No" placeholder="请输入编号">
姓名<input type="text" id="name" placeholder="请输入姓名">
性别 <input type="text" id="gender" placeholder="请输入性别">
<input type="button" id="button" value="添加" onclick="fun()">
</div>
<table border="1" cellspacing="0" width="640px">
<tr>
<th colspan="4">学生信息</th>
 
</tr>
<tr>
<!--这里使用th可以使文字变大、变粗-->
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
 
<script>
<!--首先要给添加按钮绑定事件-->
function fun(){
//第一步,要获取用户已输入的值
var No=document.getElementById("No").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
//第二步:
// 1.添加 td-No列
var td_No=document.createElement("td");
//添加文本节点
var text_No=document.createTextNode(No);
//在列中添加文本节点
td_No.appendChild(text_No);
//2.添加td_name列
var td_name=document.createElement("td");
//添加文本节点
var text_name=document.createTextNode(name);
//把文本节点添加到列中
td_name.appendChild(text_name);
//3.添加td_gender列
var td_gender=document.createElement("td");
//添加文本节点
var text_gender=document.createTextNode(gender);
//把文本节点添加到列中
td_gender.appendChild(text_gender);
//4.添加td_a列
var td_a=document.createElement("td");
var a=document.createElement("a");
//设置额a标签的属性
a.setAttribute("href","#");
a.setAttribute("id","a");
a.setAttribute("onclick","del()");//this指的是获得当前对象
//添加文本节点
var text=document.createTextNode("删除");
//把文本节点添加到a标签中
a.appendChild(text);
//把a标签添加到列中
td_a.appendChild(a);
//第三步:添加行
var tr=document.createElement("tr");
//第四部把列添加到行中去
tr.appendChild(td_No);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//第五步:把行添加到表格中
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除
function del(){
//获取当前对象
var j=document.getElementById("a");
//获取当前对象所在的表
var table=j.parentNode.parentNode.parentNode;
//获取当前对象所在的行
var tr=j.parentNode.parentNode;
//执行删除操作
table.removeChild(tr);
}
 
</script>
</body>
</html>

おすすめ

転載: www.cnblogs.com/Hubert-dzl/p/11105979.html