Word Selector - Select table cell horizontally and vertically

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.