Asked : Nov 17
Viewed : 11 times
How to select table cells vertically and horizontally using javascript or jquery.
Nov 17
Its very easy to implement table cell selector using javascript and jquery, you have to create you own custom method and code using jquery and javascript function as per your need. here i will give you my code sample which i create as per my need, you can make changes in this code as per your need.
1. HTML
<div class="game-section" id="game-section">
<table id="">
<tr>
<td><span id="_1">L</span><span id="_2">B</span><span id="_3">H</span><span id="_4">U</span><span id="_5">M</span><span id="_6">E</span><span id="_7">R</span><span id="_8">U</span><span id="_9">S</span><span id="_10">M</span><span id="_11">I</span>
<span id="_12">C</span>
<br><span id="_13">Q</span><span id="_14">W</span><span id="_15">Q</span><span id="_16">G</span><span id="_17">Q</span><span id="_18">K</span><span id="_19">T</span><span id="_20">C</span><span id="_21">T</span><span id="_22">M</span><span id="_23">Q</span>
<span id="_24">R</span>
<br><span id="_25">Y</span><span id="_26">Q</span><span id="_27">F</span><span id="_28">M</span><span id="_29">P</span><span id="_30">P</span><span id="_31">A</span><span id="_32">T</span><span id="_33">E</span><span id="_34">L</span><span id="_35">L</span>
<span id="_36">A</span>
<br><span id="_37">V</span><span id="_38">B</span><span id="_39">Z</span><span id="_40">R</span><span id="_41">V</span><span id="_42">N</span><span id="_43">M</span><span id="_44">P</span><span id="_45">R</span><span id="_46">K</span><span id="_47">U</span>
<span id="_48">N</span>
<br><span id="_49">E</span><span id="_50">U</span><span id="_51">B</span><span id="_52">A</span><span id="_53">C</span><span id="_54">K</span><span id="_55">B</span><span id="_56">O</span><span id="_57">N</span><span id="_58">E</span>
<span id="_59">Y</span><span id="_60">I</span>
<br><span id="_61">R</span><span id="_62">L</span><span id="_63">S</span><span id="_64">D</span><span id="_65">W</span><span id="_66">R</span><span id="_67">E</span><span id="_68">Q</span><span id="_69">U</span><span id="_70">Z</span>
<span id="_71">C</span><span id="_72">U</span>
<br><span id="_73">T</span><span id="_74">I</span><span id="_75">B</span><span id="_76">I</span><span id="_77">A</span><span id="_78">S</span><span id="_79">H</span><span id="_80">G</span><span id="_81">M</span><span id="_82">B</span>
<span id="_83">X</span><span id="_84">M</span>
<br><span id="_85">E</span><span id="_86">J</span><span id="_87">F</span><span id="_88">U</span><span id="_89">C</span><span id="_90">G</span><span id="_91">D</span><span id="_92">F</span><span id="_93">L</span><span id="_94">N</span>
<span id="_95">Z</span><span id="_96">F</span>
<br><span id="_97">B</span><span id="_98">Y</span><span id="_99">X</span><span id="_100">S</span><span id="_101">K</span><span id="_102">E</span><span id="_103">L</span><span id="_104">E</span><span id="_105">T</span><span id="_106">O</span>
<span id="_107">N</span><span id="_108">A</span>
<br><span id="_109">R</span><span id="_110">D</span><span id="_111">U</span><span id="_112">U</span><span id="_113">V</span><span id="_114">P</span><span id="_115">T</span><span id="_116">M</span><span id="_117">W</span><span id="_118">I</span>
<span id="_119">R</span><span id="_120">B</span>
<br><span id="_121">A</span><span id="_122">Q</span><span id="_123">N</span><span id="_124">Y</span><span id="_125">V</span><span id="_126">S</span><span id="_127">W</span><span id="_128">U</span><span id="_129">A</span><span id="_130">A</span>
<span id="_131">Q</span><span id="_132">X</span>
<br><span id="_133">E</span><span id="_134">B</span><span id="_135">T</span><span id="_136">W</span><span id="_137">L</span><span id="_138">Z</span><span id="_139">I</span><span id="_140">R</span><span id="_141">A</span>
<span id="_142">U</span><span id="_143">O</span><span id="_144">H</span>
<br>
</td>
</tr>
</table>
</div>
2. Javascript or jquery
function initWordSearch() {
// Set global variables for comparisons
var active, start, startX, startY, axis;
$("#game-section span").mousedown(function(ev) {
start = $(this)
active = true;
$(".highlightE").removeClass("highlightE"); // clear previous selection
ev.preventDefault(); // this prevents text selection from happening
start.addClass("highlightE");
// Set global variables
var position = start.position()
startX = position.left;
startY = position.top;
});
$("#game-section span").mousemove(function(ev) {
// Get direction of the first highlighted span to compare
if(!$(this).hasClass('highlightE') && active) {
var position = $(this).position();
var x = position.left;
var y = position.top;
// Only decide which way the highlights should go on the first one highlighted
if(!axis) {
x === startX ? axis = 'y' : axis = 'x';
}
// If axis is equal to y, it should go sideways
if(axis === 'y' && x === startX && y > startY) {
$(this).addClass("highlightE");
}
// If its x, it should go up and down
if(axis === 'x' && y === startY && x > startX) {
$(this).addClass("highlightE");
}
}
});
// Reset all globals
$(document).mouseup(function(ev) {
active = false;
start = '';
startX = '';
startY = '';
axis = '';
});
}
$(document).ready(function(e) {
initWordSearch();
});
3. CSS
.game-section tr span {
padding: 3px 4px;
width: 23px;
display: inline-block;
text-align: center;
height: 23px;
line-height: 28px;
}
.game-section tr span.highlightE {
background: #f18443;
}
.game-section {
background: white;
width: 382px;
clear: both;
margin: auto;
padding: 10px;
border: 1px solid #e6e6e6;
}
you can share this answer for appreciate me.
answered Apr 16