JSスタディノート12-追加、削除、変更、調査

1.増やす

1.要素ノードdocument.createElement()を作成します

(1)document.createElementを使用して、要素ノードオブジェクトを作成できます。
(2)パラメータとしてタグ名が必要です。タグ名に基づいて要素ノードオブジェクトを作成し、作成したオブジェクトを戻り値として返します。var li=document.createElement("li")

2.テキストノードオブジェクトdocument.createTextNode()を作成します

(1)テキストノードオブジェクトの作成に使用できます。
(2)パラメータとしてテキストコンテンツが必要で、コンテンツに基づいてテキストノードを作成し、新しいノードを返します。var gxText=document.createTextNode("广州")

3.新しい子ノードappendChild()を親ノードに追加します

(1)テキストノードを要素ノードに追加します。
(2)使用法:親node.appendChild(子ノード);li.appendChild(gxText)

4.指定された子ノードの前に新しい子ノードを挿入しますinsertBefore()

(1)insertBefore()は、指定された子ノードの前に新しい子ノードを挿入でき
ます。(2)構文:親ノード。insertBefore(新しいノード、古いノード);
ここに画像の説明を挿入

5.新しいノードが古いノードreplaceChild()を置き換えます

(1)指定された子ノードを使用して既存の子ノードを置き換えることができます
(2)構文:parent node.replaceChild(新しいノード、古いノード)city.replaceChild(li,bj)

6.子ノードを削除しますremoveChild()

(1)removeChild()は子ノードを削除できます
(2)構文:
parent
node.removeChild(child node)child node.parentNode.removeChild(child node)
city.removeChild(bj)
(3)親ノードが誰であるかわからない場合は、最初に親ノードを取得できます。最初に親ノードを取得する必要はありません。bj.parentNode.removeChild(bj)

7.innerHTMLを介して新しいノードを追加します

(1)innerHTMLを使用すると、DOMの追加、削除、および変更の関連操作を完了することもできます。
(2)通常、上記の方法と組み合わせます。
(2)構文:parent node.innerHTML + = "new node"
ここに画像の説明を挿入
ここに画像の説明を挿入

二、削除

1.従業員情報を削除します

(1)ハイパーリンクをクリックした後、従業員の情報を削除します。
ハイパーリンクをクリックすると、ハイパーリンクがページにジャンプします。これはハイパーリンクのデフォルトの動作ですが、現時点ではデフォルトの動作は必要ありません。デフォルトの動作をキャンセルするには、falseを返します。

//删除tr的响应函数
function delA(){
    
    
var tr=this.parentNode.parentNode;

//获取要删除的员工的名字
var name=tr.getElementByTagName("td")
[0].innerHTML;
//var name=tr.children[0].innerHTML;

//删除之前弹出提示框
var flag=confirm("确认删除"+name+"吗??");

//如点击确认
if(flag){
    
    
  //删除tr
  tr.parentNode.removeChild(tr);
}
}

//获取所有的超链接
var allA=document.getElementByTagName("a");

//为每一个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
    
    

/*for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时,for循环早已执行完毕
*/
allA[i].onclick=delA;

//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接,那么this就是谁
//通过this去获取this所在的那一行元素,然后进行删除

}

(2)confirm()ユーザーは、確認ボタンとキャンセルボタンのプロンプトボックスをポップアップします。これには、パラメーターとして文字列が必要であり、文字列がプロンプトメッセージとして使用されます。ユーザーが[OK]をクリックするとtrueを返し、キャンセルするとfalseを返します

3、追加

1.従業員情報の追加
(1)ボタンをクリックした後、フォームに従業員情報を追加します
ここに画像の説明を挿入

//获取用户添加的员工信息
//获取员工的名字
var name=document.getElementById("empName").value;
//获取email,salary
var email=document.getElementById("email").value;
var salary=document.getElementById("salary").value;

//需要将获取到的信息保存到tr中
//创建一个tr
var tr=ducument.createElement("tr");

//创建四个td
var nameTd=docuemnt.createElement("td");
var emailTd=docuemnt.createElement("td");
var salaryTd=docuemnt.createElement("td");
var aTd=docuemnt.createElement("td");

//创建一个a元素
var a=document.createElement("a");

//创建文本内容
var nameText=document.createTextNode(name);
var emailText=document.createTextNode(email);
var salaryText=document.createTextNode(salary);
var delText=document.createTextNode("Delete");
//将创建好的td加入到tr中去
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);

//将文本节点添加到td中去
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText);

//将a元素加入到tr中
aTd.appendChild(a);

//向a中添加href属性
a.href="javascript:;";

//为新添加的a帮绑定一次单击响应函数
a.onclick=delA;

//获取table
var employeeTable=document.getElemrntById("employeeTable");

//获取employeeTable中的tbody
var tbody=employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(tr);

追加する2番目の方法

//设置tr中的内容
tr.innerHTML="<td>"+name+"</td>"+
             "<td>"+email+"</td>"+
             "<td>"+salary+"</td>"+
             "<td><a href="javascript:;">Delete</a></td>"
var a=tr.getElementsByTagName("a")[0];
a.onclick=delA;

おすすめ

転載: blog.csdn.net/weixin_45636381/article/details/113248474