How to select table cells vertically and horizontally using javascript or jquery.

javascript jquery jquery-selectors table datatable 
1 Answers

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


Login and Submit Your Answer
Browse other questions tagged  javascript  jquery  jquery-selectors  table  datatable or ask your own question.