Как захватить окружающие элементы td?

Question

Хорошо, поэтому у меня есть эта структура html jsfiddle, и я хочу сделать, это захватить все 8 окружающих tds при щелчке.

Так, например, если пользователь нажимает на # c3, тогда мне нужен массив из ['b2', 'b3', 'b4', 'c2', 'c4', 'd2', 'd3', ' 'd4'], но если они выберут # a2, так как у него нет 8 окружающих углов, он вернется ['a1', 'a3', 'b1', 'b2', 'b3']

Это направление I клонит, но я думаю, что это будет довольно сложным ... любые идеи лучше, или это лучший способ

function surrounding_table_rows(id){ 
    var table_rows = new Array(); 
    var letters = new Array("a","b","c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o"); 
    var letter = id[0]; 
    var number = id[1]; 
    var index = letters.indexOf(letter); 
    if (index == 0) { 
    // need to add this logic here 
    }else{ 
    var prior_letter = letters[index - 1]; 
    var after_letter = letters[index + 1]; 
    if (number == 0) { 
    // need to add this logic here 
    }else if(number == 14){ 
     // need to add this logic here 
    }else{ 
     table_rows.push("#"+letter+(parseInt(number)-1)); 
     table_rows.push("#"+letter+(parseInt(number)+1)); 
     table_rows.push("#"+prior_letter+(parseInt(number)-1)); 
     table_rows.push("#"+prior_letter+(number)); 
     table_rows.push("#"+prior_letter+(parseInt(number)+1)); 
     table_rows.push("#"+after_letter+(parseInt(number)-1)); 
     table_rows.push("#"+after_letter+(number)); 
     table_rows.push("#"+after_letter+(parseInt(number)+1)); 
    } 

    } 
    return table_rows; 
} 

мой Javascript функция делает работу на среднем

surrounding_table_rows("d4") 
["#d3", "#d5", "#c3", "#c4", "#c5", "#e3", "#e4", "#e5"] 

вот HTML

<table class='config'> 
       <tr> 
       <td id='a1'></td> 
       <td id='a2'></td> 
       <td id='a3'></td> 
       <td id='a4'></td> 
       <td id='a5'></td> 
       <td id='a6'></td> 
       <td id='a7'></td> 
       <td id='a8'></td> 
       <td id='a9'></td> 
       <td id='a10'></td> 
       <td id='a11'></td> 
       <td id='a12'></td> 
       <td id='a13'></td> 
       <td id='a14'></td> 
       <td id='a15'></td> 
       </tr> 
       <tr> 
       <td id='b1'></td> 
       <td id='b2'></td> 
       <td id='b3'></td> 
       <td id='b4'></td> 
       <td id='b5'></td> 
       <td id='b6'></td> 
       <td id='b7'></td> 
       <td id='b8'></td> 
       <td id='b9'></td> 
       <td id='b10'></td> 
       <td id='b11'></td> 
       <td id='b12'></td> 
       <td id='b13'></td> 
       <td id='b14'></td> 
       <td id='b15'></td> 
       </tr> 
       <tr> 
       <td id='c1'></td> 
       <td id='c2'></td> 
       <td id='c3'></td> 
       <td id='c4'></td> 
       <td id='c5'></td> 
       <td id='c6'></td> 
       <td id='c7'></td> 
       <td id='c8'></td> 
       <td id='c9'></td> 
       <td id='c10'></td> 
       <td id='c11'></td> 
       <td id='c12'></td> 
       <td id='c13'></td> 
       <td id='c14'></td> 
       <td id='c15'></td> 
       </tr> 
       <tr> 
       <td id='d1'></td> 
       <td id='d2'></td> 
       <td id='d3'></td> 
       <td id='d4'></td> 
       <td id='d5'></td> 
       <td id='d6'></td> 
       <td id='d7'></td> 
       <td id='d8'></td> 
       <td id='d9'></td> 
       <td id='d10'></td> 
       <td id='d11'></td> 
       <td id='d12'></td> 
       <td id='d13'></td> 
       <td id='d14'></td> 
       <td id='d15'></td> 
       </tr> 
       <tr> 
       <td id='e1'></td> 
       <td id='e2'></td> 
       <td id='e3'></td> 
       <td id='e4'></td> 
       <td id='e5'></td> 
       <td id='e6'></td> 
       <td id='e7'></td> 
       <td id='e8'></td> 
       <td id='e9'></td> 
       <td id='e10'></td> 
       <td id='e11'></td> 
       <td id='e12'></td> 
       <td id='e13'></td> 
       <td id='e14'></td> 
       <td id='e15'></td> 
       </tr> 
       <tr> 
       <td id='f1'></td> 
       <td id='f2'></td> 
       <td id='f3'></td> 
       <td id='f4'></td> 
       <td id='f5'></td> 
       <td id='f6'></td> 
       <td id='f7'></td> 
       <td id='f8'></td> 
       <td id='f9'></td> 
       <td id='f10'></td> 
       <td id='f11'></td> 
       <td id='f12'></td> 
       <td id='f13'></td> 
       <td id='f14'></td> 
       <td id='f15'></td> 
       </tr> 

Answer 1

Вот элементарное решение вашей проблемы, с помощью JQuery: http://jsfiddle.net/ujDsS/9/

$(function() { 
$("td").css("cursor","pointer").click(function() { 
    $("td").css("background","white"); 
    var $i, $j; 
    var cell = $(this), parentRow = cell.parent(), container = parentRow.parent(); 
    var x = parentRow.children("td").index(cell), y = container.children("tr").index(parentRow); 
    var myID = cell.attr("id"); 

    for ($i = -1; $i <= 1; $i++) { 
     if (y-$i < 0) continue; 
     var row = container.children("tr").eq(y-$i); 
     if (!row.length) continue; 

     for ($j = -1; $j <= 1; $j++) { 
      if (x-$j < 0) continue; 
      var cell2 = row.children("td").eq(x-$j); 
      if (!cell2.length) continue; 
      cell2.css("background","red"); 
     } 
     } 
    }); 
}); 

Что я делаю это довольно просто: на каждый клик, преобразовать ячейки в его координаты xy, а затем проведите по 8 соседям + и нарисуйте их красным.

У jQuery есть проблема (это функция, действительно), где индексы eq могут быть отрицательными. Фиксируя это в качестве упражнения - это так же просто, как проверка, если у- $ я отрицательна :-)

Это предполагает одно: Вы не будете использовать colspan или rowspan