詳しい人求む！

jqueryとscriptでTABLEのセルをマウスオーバーした際に縦横ハイライトさせたい

締切済

質問者：minmin7
質問日時：2017/06/28 22:07
回答数：2件

参考サイト：http://peacepopo.net/blog-entry-194.html
デモ：http://peacepopo.net/wp-content/uploads/ftp/194/ …
上記のサイト様の様に縦横ハイライトさせたいのですが、
TABLEにrowspanが入っていると、rowspanのとなりの一番上のセルを
マウスオーバーした際に縱のハイライトがずれてしまいます。
過去の質問の中に近い物は見つけたのですがいまいち適用できません。
http://qa.itmedia.co.jp/qa6415069.html
なにか別の良い方法があればご伝授御願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2017/06/29 13:29

こんにちは

No1様もおっしゃっていますように、rowspanやcolspanが含まれると、マークアップの構造と行、列の関係は一致しなくなります。
行に関しては、tr要素があるので多少なりとも関係を維持できていますが、列に関してはまるっきりなので、文書構造からは判断できなくなりますね。
表全体の構成を解析しておいて位置関係を計算するか、あるいは、レイアウトされた結果から判断するしかないように思います。

一方で、どのようなルールになさりたいのかについては、ご質問文に書いてないのでわかりませんが、とりあえず似たものとして、エクセルの選択に近い感じで考えてみました。
・・とは言え、選択ではなくてmouseoverなので印象は少々違いますが。

以下は、レイアウトされた結果の位置から判断する方法での一例です。
ルールとして違うものを適用なさりたい場合は、判断している部分（if～の部分）を修正すれば可能と思います。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
td { width:2em; height:1.2em; }
td.active { background-color: #FDA; }
td.relative { background-color: #FFC; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
</head>
<body>

<table id="test" border="1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>

<tr><td>11</td><td>12</td><td colspan=4>13</td>
<td>17</td><td rowspan=3>18</td><td>19</td><td>20</td></tr>

<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
<td>26</td><td>27</td><td>29</td><td>30</td></tr>

<tr><td>31</td><td rowspan=2 colspan=2>32</td><td>34</td>
<td>35</td><td>36</td><td>37</td><td>39</td><td>40</td></tr>

<tr><td>41</td><td>44</td><td>45</td>
<td colspan=3>46</td><td>49</td><td>50</td></tr>

<tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td>
<td>56</td><td>57</td><td>58</td><td>59</td><td>60</td></tr>
</table>

<script type="text/javascript">
var tbl = $("#test"), tds = $("td", tbl);

tbl.on("mouseenter", "td", function(){
var t = $(this), o = t.offset();
var x1 = o.left, x2 = x1 + t.width();
var y1 = o.top, y2 = y1 + t.height();

for(var i=0; i<tds.length; i++){
var e = tds.eq(i), o = e.offset();
var x = o.left; y = o.top;
if((x1<=x && x<x2) || (y1<=y && y<y2)) e.addClass("relative");
}
t.removeClass("relative").addClass("active");

}).on("mouseleave", "td", function(){
$("td", tbl).removeClass("active").removeClass("relative");
});
</script>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2017/06/29 10:02

答えは「できない」です。

<table border>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td rowspan=2>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td rowspan=2>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td></tr>
</table>

上記、6や10のようなズレが想定されるので相関関係がおかしくなるので

逆に、このような例外をどうするかきちんと仕様をきめればやりようはあります。