用js指定一個table裡面的一個單元格的屬性，並將其改變的簡單方法
對個table裡面的所有單元格，js可以用簡單的方法修改指定的格子
今天web老師佈置了一個作業要用html+css+js完成對一個格子的控制，具體看下圖：
要求是你輸入row、col生成指定數量的table即包含row行、col列，然後隨機讓一塊<td></td>（格子）上色，並在下方的左右上下四個按鈕中控制這塊格子移動，在做的過程中，我發現最難的是怎麼選取一個指定行、指定列的格子如我要選第三行第四列的格子，給它上個色，然後網上一通功夫沒找到好方法，求大佬告知，最後我“返璞歸真”用了“id法”，就是給每個td格子加一個id ，id=（i*row+j）.toString();如:第三行第四列的格子,當整個table是10*10的時候，那麼這個td的id=“34”，如此類推，要注意的就是要字串話，用到了toString函式。可能還有一個難點就是動態生成一個制定行列數的table，其實就是用了innerHTML方法，具體可以看下面程式碼，好了，總之我覺得這個東西挺有意思的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #container{margin:0 auto;width:600px;height:auto;}input{height:2em;border:0.15em solid #ccc;}table{width:auto;height:auto;border:1px solid gray;overflow:hidden;}tr{margin:0;padding:0;border:0.15em solid #ccc;}td{width:2.5em;height:2.5em;border:0.15em solid lightskyblue;border-radius:2px;}#control{margin-top:50px;}</style></head><body><div id="container" name = "container"> <div>Enter number of rows<input type="text" name="row"id="row"> </div> <div>Enter number of columns<input type="text" name="col" id="col"> </div> <div> <button type="button" name="generate" id="btn">Generate</button> </div> <table id="table"></table> <div id="control"> <button id="left">Left</button> <button id="right">Right</button> <button id="up">Up</button> <button id="down">Down</button> </div></div><script>function $$(id){return document.getElementById(id);}function showcolor(i,j){var xuhao = (i*row + j).toString();$$(xuhao).style.backgroundColor = "purple";console.log(i,j);}function removeColor(i,j){var xuhao = (i*row + j).toString();$$(xuhao).style.backgroundColor = "white";console.log(i,j);}let row=0,col=0;let i = 0, j = 0;$$("btn").onclick=function(){ row = parseInt($$("row").value);//從input中獲取的是string轉為intcol = parseInt($$("col").value);var tab = "<table>";for(let i=0;i<row;i++){ tab += "<tr>"for(let j=0;j<col;j++){var xuhao = (i*row+j).toString();tab+="<td id="+xuhao+"></td>";//這裡加入了id 排好了序} tab+="</tr>";} tab+="</table>";$$("table").innerHTML = tab;$$("btn").disabled="true";console.log("row="+row+" col="+col);i = Math.floor(Math.random()*row);j = Math.floor(Math.random()*col);showcolor(i,j);//有一個初始點}$$("left").onclick=function(){let pre = j;removeColor(i,pre);j = (j-1+col)%col;showcolor(i,j);};$$("right").onclick=function(){let pre = j;removeColor(i,pre);j = (j+1+col)%col;showcolor(i,j);};$$("up").onclick=function(){let pre = i;removeColor(pre,j);i = (i-1+row)%row;showcolor(i,j);};$$("down").onclick=function(){let pre = i;removeColor(pre,j);i = (i+1+row)%row;showcolor(i,j);};</script></body></html>
………………快進
相關推薦
用js指定一個table裡面的一個單元格的屬性，並將其改變的簡單方法
對個table裡面的所有單元格，js可以用簡單的方法修改指定的格子 今天web老師佈置了一個作業要用html+css+js完成對一個格子的控制，具體看下圖：要求是你輸入row、col生成指定數量的table即包含row行、col列，然後隨機讓一塊<td>&l
提取一個字符串中的數字，並將其轉為數組
var ace fun 有米 blog 提取 function pan 一個 有米科技2017校招筆試題之一，以下是自己寫的，不代表最佳答案。 舉例：str = ‘fdfd22fifei42fkdfl5hf66‘; 結果應為：[22,42,5,66] var str =
用x，y，z組成2個3位數，並將其相加成一個數字，求xyz
int x,y,x,i,result=520; //可令result為隨機一個數字 for(i=100;i<=result;i++) //次處為演算法靈魂之處 { x=i%100; //依次遞增1，遞增到10後變為0 y=i%100/10
手機端 : js設置table內容 加載更多，並頭部鎖定懸浮
加載 prototype opened 默認 head left round roo scrollto <script src="js/jquery.min.js" type="text/javascript"></script> <!
C 兩個連結串列中資料節點的資料域為一個字母 ，其中L1包含L2，在L1中找出與L2相等的字串，並將其逆置
前面相關操作在這呢，這個函式依託於此 //結構體 typedef struct Node { ElementType data; struct Node * next; } LNode, * LinkNode; //兩個連結串列中資料節點的資料域為一個字母 http
a=[12，34，56]，用程式碼求出a裡面三個數字組合，並求出組合裡面的最大數，如可以組成123456，125634，563412，561234，341256，345612。
這個題目主要用到迴圈、字串拼接和排序，程式碼如下： a = [12,34,56] d = [] #儲存新的list for i in a: for j in a: for k in a: if (i != j) and (j != k) and (i != k)
完成一個“可以由使用者鍵入文字內容，並輸出其字元個數”的Java應用程式
一、任務目標 完成一個 java application應用程式，可以接收使用者通過鍵盤輸入的文字，並輸出此段文字字元的個數。 二、Scanner類 Scanner是JDK1.5新增的一個類，可以使用該類建立一個物件。它是一個可以使用正則表示
python讀取sql裡面的指定資料列，並將其轉換成列表使用
程式碼如下： import pyodbc import pandas as pd import numpy as np conn = pyodbc.connect(r'DRIVER={SQL Server Native Client 10.0};SERVER=.;DATABASE=資料庫名字
.使用malloc開闢一個3*4的二維陣列，並將內容初始化為0-11
方法一·： 很容易聯想到使用指標陣列 <pre name="code" class="cpp">#define ROW 3 #define COL 4 void Test4() {
建立一個自己的Vue UI元件庫，並將它釋出在npm上
本文僅限於入門級，沒有成規模製作，希望能對你有所幫助。 因為在開發多個專案中可能會用到同一個元件，那麼我們通過複製貼上的形式更新，無異於是笨拙的，我們可以通過上傳到npm後，不斷迭代npm包來實現更新。 前期準備 初始化project 這裡我們使用vue-cli來初始化一個vue專案。 npm install
查詢電腦上某個端口占用，並將其刪除
1.cmd 啟動 2.輸入 netstat -aon|findstr "5037" 查詢具體的5037埠 也可以 netstat -an 檢視所有的埠號 最後一個數字是 pid號 3.根據pid 查詢相對的應用 輸入 tasklist|findstr "pid號"
使用js方法將table表格中指定列指定行中相同內容的單元格進行合並操作。
var get 是否 for true ntb doc ide 就是 一、簡介 使用js方法對html中的table表格進行單元格的行列合並操作。 網上執行此操作的實例方法有很多，但根據實際業務的區別，大多不適用。 所以在網上各位大神寫的方法的基礎上進行了部分修改以適合自己
JS節點操作 （表格在js中添加行和單元格，並有一個刪除鍵）
sed doc nod lis 姓名 ins func play 移除 1 <div id="div"> 2 <table id="tab"> 3 <tr> 4 <th&g
Jscript動畫系列(1)-----用JS在Canvas上畫一個小球
最近在學習JS動畫，有一些心的同大家分享！由於前期內容比較少，樣式什麼的就寫在Html檔案裡了！ 首先(Index.html) <!doctype html> <html>
用js在頁面上顯示一個Hello Word
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在頁面上顯示一個Hello Word</title&
用JS判斷CheckBox至少有一個被選中
假設我們有個checkbox叫optHSCameratyp，我們寫個函式來判斷function chkCheckBoxChs(objNam){ //檢測是否有選擇多選框的至少一項var ōbj = document.getElementsByName(objNam); //獲
Excel VBA 根據下拉框單元格的值來改變另一個下拉框單元格的值
在很多的報表開發中，需要用到VBA去設定Excel的一些規則。 以下是一個根據下拉框單元格的值來給特定單元格進行賦值的程式碼： Private Sub Worksheet_SelectionChange(ByVal Target As Range) On Error Resume
建立一個物件陣列，內放5個學生的資料（學號，成績），用指向物件的指標做函式引數，在max函式中找出5個學生中成績最高者，並輸出其學號。
原始碼如下：主要注意友元函式的宣告 #include <iostream> #include <string> using namespace std; class Student { public: Student(string n,flo
一個介面有多個實現類，當呼叫介面中的方法時，如何判定用的是哪個實現類
一、簡單例子： 1. 直接new一個例項，這樣肯定知道用的哪個例項2. 定義介面型別的變數，用某個例項去初始化。。。這樣也是肯定知道用的哪個例項一般我們用第二種方式有一個好處，如果以後要改動，那麼只需要修改其引用的例項,改動較少!舉個例子：A介面，A1，A2，A3實現A
練習 1-9 編寫一個將輸入複製到輸出的程式，並將其中連續的多個空格用一個空格代替。
C語言程式設計（第二版） 練習1-9 個人設計 練習 1-9 編寫一個將輸入複製到輸出的程式，並將其中連續的多個空格用一個空格代替。 程式碼塊： 方法1： #include <stdio.h&g