2

わかりましたので、私はこのhtml構造jsfiddleを持っています。私がしたいのは、1つがクリックされたときに周囲の8つのtdsをすべて取得することです。

たとえば、ユーザーが #c3 をクリックすると、['b2', 'b3', 'b4', 'c2', 'c4', 'd2', 'd3', 'd4'] の配列が必要になりますただし、周囲に 8 つのコーナーがないため #a2 を選択すると、['a1', 'a3', 'b1', 'b2', 'b3'] が返されます。

これは私が進んでいた方向ですが、これはかなり複雑になると思います...より良いアイデア、またはこれが最善の方法ですか

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>
4

1 に答える 1

4

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 つの隣接セルとそれ自体をループして赤く塗りつぶします。

eqjQueryには、のインデックスが負になる可能性があるという問題があります（これは実際には機能です） 。これを修正することは演習として残します - y-$i が負かどうかをチェックするのと同じくらい簡単です:-)

colspanこれは、1つのことを前提としています。rowspan

于 2013-06-07T01:11:13.937 に答える