javascript實現(xiàn)切換td中的值
之前面試前端時,遇到一道面試題,當(dāng)時沒有思緒所以沒答出來,今天整理了一下和大家一起分享下:
原題是:使用對象方法創(chuàng)建一個2x2的表格(table),要求第二行第二列單元格中擁有一個按鈕,當(dāng)點擊此按鈕時,第一行第一列的值與第二行第一列的值互換,見下圖
創(chuàng)建表格
點擊效果
本人愚鈍,如果您有更好的方法不妨告訴在下,本人琢磨了半天終于有了些結(jié)果:
1.創(chuàng)建表格的對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table td{text-align: center;}
</style>
</head>
<body>
<h2>使用對象創(chuàng)建表格</h2>
<script>
var table={
value1:"value1",
value2:"value2",
row:2,
cell:2,
create:function(){
//創(chuàng)建表格
var table=document.createElement("table");
table.border=1;
table.width="500";
//創(chuàng)建按鈕
var button=document.createElement("button");
button.innerHTML="切換";
button.name="qiehuan";
button.setAttribute("onclick","qiehuan()");
//創(chuàng)建行
for(var i=0;i<this.row;i++){
table.insertRow();
}
//創(chuàng)建列
for(var i=0;i<this.cell;i++){
table.rows[i].insertCell();
table.rows[i].insertCell();
}
//將表格添加到body
document.body.appendChild(table);
var table=document.getElementsByTagName("table")[0];
var row1=table.rows[0];
var row2=table.rows[1];
table.rows[1].cells[1].appendChild(button);
var a=row1.cells[0].innerHTML=this.value1;
var b=row2.cells[0].innerHTML=this.value2;
}
}
table.create();
</script>
</body>
</html>
創(chuàng)建表格方法實現(xiàn)的效果為:
點擊切換代碼:
function qiehuan(){
//獲取table
var table=document.getElementsByTagName("table")[0];
//獲取tr
var row1=table.rows[0];
var row2=table.rows[1];
//交換內(nèi)容
//創(chuàng)建新元素來存儲數(shù)據(jù)
var a=row1.cells[0].innerHTML;
var b=row2.cells[0].innerHTML;
row1.cells[0].innerHTML=b;
row2.cells[0].innerHTML=a;
}
點擊切換按鈕效果為:
拓展延伸:
1.我想實現(xiàn)點擊id/name/sex來更換排序:
原始
效果
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="500">
<th colspan="3">點擊替換內(nèi)容</th>
<tr>
<td id="id">id</td>
<td id="name">name</td>
<td><span id="sex">sex</span></td>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>女</td>
</tr>
</table>
<script>
//綁定效果---ie下失效
document.getElementById('id').addEventListener('click', f_switch, false);
document.getElementById('name').addEventListener('click', f_switch, false);
document.getElementById('sex').addEventListener('click', f_switch, false);
function f_switch(){
//獲取table
var table=document.getElementsByTagName("table")[0];
//獲取行元素
var row1=table.rows[2];
var row2=table.rows[3];
//方法一
//創(chuàng)建新元素來存儲數(shù)據(jù)
var newrow=document.createElement("tr");
var newhtml=newrow.innerHTML=row2.innerHTML;
var newrow2=document.createElement("tr");
var newhtml2=newrow2.innerHTML=row1.innerHTML;
//替換
row1.innerHTML=newhtml;
row2.innerHTML=newhtml2;
//方法二
//不明白....下面一句就能實現(xiàn)
//table.appendChild(row1);
}
</script>
<br>
</body>
</html>
- javascript實現(xiàn)Table間隔色以及選擇高亮(和動態(tài)切換數(shù)據(jù))的方法
- JavaScript實現(xiàn)點擊文字切換登錄窗口的方法
- JavaScript實現(xiàn)多個重疊層點擊切換效果的方法
- javascript實現(xiàn)圖片自動和可控的輪播切換特效
- javascript實現(xiàn)ecshop搜索框鍵盤上下鍵切換控制
- javascript實現(xiàn)按回車鍵切換焦點
- 原生javascript實現(xiàn)圖片按鈕切換
- 原生javascript實現(xiàn)Tab選項卡切換功能
- javascript回車完美實現(xiàn)tab切換功能
- js(JavaScript)實現(xiàn)TAB標(biāo)簽切換效果的簡單實例
- javascript實現(xiàn)的多個層切換效果通用函數(shù)實例
相關(guān)文章
style、 currentStyle、 runtimeStyle區(qū)別分析
style、 currentStyle、 runtimeStyle區(qū)別分析,需要的朋友可以參考下。2010-08-08javascript創(chuàng)建數(shù)組的最簡代碼
2008-02-02es6 filter() 數(shù)組過濾方法總結(jié)
這篇文章主要介紹了es6 filter() 數(shù)組過濾方法總結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04