javascript實(shí)現(xiàn)切換td中的值
之前面試前端時(shí),遇到一道面試題,當(dāng)時(shí)沒有思緒所以沒答出來,今天整理了一下和大家一起分享下:
原題是:使用對(duì)象方法創(chuàng)建一個(gè)2x2的表格(table),要求第二行第二列單元格中擁有一個(gè)按鈕,當(dāng)點(diǎn)擊此按鈕時(shí),第一行第一列的值與第二行第一列的值互換,見下圖
創(chuàng)建表格
點(diǎn)擊效果
本人愚鈍,如果您有更好的方法不妨告訴在下,本人琢磨了半天終于有了些結(jié)果:
1.創(chuàng)建表格的對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table td{text-align: center;}
</style>
</head>
<body>
<h2>使用對(duì)象創(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)建表格方法實(shí)現(xiàn)的效果為:
點(diǎ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)建新元素來存儲(chǔ)數(shù)據(jù)
var a=row1.cells[0].innerHTML;
var b=row2.cells[0].innerHTML;
row1.cells[0].innerHTML=b;
row2.cells[0].innerHTML=a;
}
點(diǎn)擊切換按鈕效果為:
拓展延伸:
1.我想實(shí)現(xiàn)點(diǎ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">點(diǎn)擊替換內(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)建新元素來存儲(chǔ)數(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;
//方法二
//不明白....下面一句就能實(shí)現(xiàn)
//table.appendChild(row1);
}
</script>
<br>
</body>
</html>
- javascript實(shí)現(xiàn)Table間隔色以及選擇高亮(和動(dòng)態(tài)切換數(shù)據(jù))的方法
- JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法
- JavaScript實(shí)現(xiàn)多個(gè)重疊層點(diǎn)擊切換效果的方法
- javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
- javascript實(shí)現(xiàn)ecshop搜索框鍵盤上下鍵切換控制
- javascript實(shí)現(xiàn)按回車鍵切換焦點(diǎn)
- 原生javascript實(shí)現(xiàn)圖片按鈕切換
- 原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
- javascript回車完美實(shí)現(xiàn)tab切換功能
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡單實(shí)例
- javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù)實(shí)例
相關(guān)文章
js實(shí)現(xiàn)拖拽 閉包函數(shù)詳細(xì)介紹
在開發(fā)過程中可能會(huì)使用js實(shí)現(xiàn)拖拽等相關(guān)功能,本文將以此問題進(jìn)行深入介紹,需要了解的朋友可以參考下2012-11-11style、 currentStyle、 runtimeStyle區(qū)別分析
style、 currentStyle、 runtimeStyle區(qū)別分析,需要的朋友可以參考下。2010-08-08javascript創(chuàng)建數(shù)組的最簡代碼
2008-02-02es6 filter() 數(shù)組過濾方法總結(jié)
這篇文章主要介紹了es6 filter() 數(shù)組過濾方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04