javascriptの表に対する簡単な操作
4511 ワード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<script type="text/javascript">
window.onload = function() {
//
var oName = document.getElementById("name");
var oAge = document.getElementById("age");
var oBtn = document.getElementById("btn1");
var oTab = document.getElementById("tab1");
var id = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function() {
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.innerHTML = id++;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML =oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = "<a href='javascript:;'> </a>";
oTr.appendChild(oTd);
oTd.getElementsByTagName("a")[0].onclick = function() {
oTab.tBodies[0].removeChild(this.parentNode.parentNode );
};
oTab.tBodies[0].appendChild(oTr);
};
//
var oTxt = document.getElementById("txt");
var oBtn2 = document.getElementById("btn2");
oBtn2.onclick = function() {
for(var i=0; i<oTab.tBodies[0].rows.length; i++) {
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oTxt.value.toLowerCase(); //toLowerCase ，
var arr = sTxt.split(" "); // “split ”
oTab.tBodies[0].rows[i].style.display = "none"; //
for(var j=0; j<arr.length; j++) {
//sTab.search(sTxt) != -1 。search ， -1
if(sTab.search(arr[j]) != -1){
oTab.tBodies[0].rows[i].style.display = "block"; //
}
}
}
}
}
</script>
</head>
<body>
：<input id="name" type="text"/>
：<input id="age" type="text"/>
<button id="btn1"> </button>
：<input id="txt" type="text"/>
<button id="btn2"> </button>
<table id="tab1" border="1" style="width: 500px" >
<thead>
<tr>
<td>ID</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>25</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"> </td>
</tr>
</tfoot>
</table>
</body>
</html>