將select中的數據添加到table中，重複的則進行修改，代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM添加和修改節點</title>
<script language="JavaScript">
function addLanguage(){
//獲取所有的td節點
var tdNode = document.getElementsByTagName("td");
//獲取select選擇的值
var lan = document.getElementById("language").value;
var exp = document.getElementById("experience").value;
//是否新建節點，true則新建一組tr項，false則修改已存在的tr項
var flag = true;
//判斷是否存在該節點
for(var i = 0;i < tdNode.length;i++){
//存在該節點，則執行下面的語句，修改其父節點的第二個子節點的文本節點
if(lan == tdNode[i].firstChild.nodeValue){
tdNode[i].parentNode.childNodes[1].firstChild.nodeValue = exp;
//將標誌位設置爲false
flag = false;
break;
}
}
//不存在該節點執行下面的語句
if(flag) {
//新建 語言 和 熟練度 的文本節點
var lanElement = document.createTextNode(lan);
var expElement = document.createTextNode(exp);
//新建 語言 和 熟練度 的td節點
var lanTdElement = document.createElement("td");
var expTdElement = document.createElement("td");
//新建 語言 和 熟練度 的tr節點
var trElement = document.createElement("tr");
//獲取 表格 的節點
var tab = document.getElementById("myTab");
//將 語言 的文本節點添加到 語言的td 節點
lanTdElement.appendChild(lanElement);
//將 語言 的 td 節點添加到 tr 節點
trElement.appendChild(lanTdElement);
//將 熟練度 的文本節點添加到 熟練度的td 節點
expTdElement.appendChild(expElement);
//將 熟練度 的 td 節點添加到 tr 節點
trElement.appendChild(expTdElement);
//將 tr 節點添加到 table 節點
tab.appendChild(trElement);
}
}
</script>
</head>
<body>
語言：
<select id="language">
<option>---請選擇語言---</option>
<option>中文</option>
<option>英語</option>
<option>日語</option>
<option>韓語</option>
</select>
熟練度：
<select id="experience">
<option>---請選擇熟練度---</option>
<option>精通</option>
<option>熟練</option>
<option>一般</option>
<option>不懂</option>
</select>
<button onclick="addLanguage();">添加</button>
<table id="myTab" border="1">
<tr>
<td>語言</td>
<td>熟練度</td>
</tr>
</table>
</body>
</html>