Javascript 如何抓住周围的td元素?
好的,我有这个html结构,我要做的是在点击一个时抓取所有8个周围的tds 例如,如果用户单击#c3,那么我想要一个数组['b2',b3',b4',c2',c4',d2',d3',d4',,但如果他们选择#a2,因为它没有8个包围角,它将返回['a1',a3',b1',b2',b3'] 这是我的方向,但我认为这会变得相当复杂…有没有更好的想法,或者这是最好的方法Javascript 如何抓住周围的td元素?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好的,我有这个html结构,我要做的是在点击一个时抓取所有8个周围的tds 例如,如果用户单击#c3,那么我想要一个数组['b2',b3',b4',c2',c4',d2',d3',d4',,但如果他们选择#a2,因为它没有8个包围角,它将返回['a1',a3',b1',b2',b3'] 这是我的方向,但我认为这会变得相当复杂…有没有更好的想法,或者这是最好的方法 function surrounding_table_rows(id){ var table_rows = new Array()
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>
以下是使用jQuery解决问题的基本方法:
$(函数(){
$(“td”).css(“光标”、“指针”)。单击(函数(){
$(“td”).css(“背景”、“白色”);
var$i,$j;
var cell=$(this),parentRow=cell.parent(),container=parentRow.parent();
var x=parentRow.children(“td”).index(单元格),y=container.children(“tr”).index(parentRow);
var myID=cell.attr(“id”);
对于($i=-1;$i,这里是使用jQuery解决问题的基本方法:
$(函数(){
$(“td”).css(“光标”、“指针”)。单击(函数(){
$(“td”).css(“背景”、“白色”);
var$i,$j;
var cell=$(this),parentRow=cell.parent(),container=parentRow.parent();
var x=parentRow.children(“td”).index(单元格),y=container.children(“tr”).index(parentRow);
var myID=cell.attr(“id”);
对于($i=-1;$i,还有另一种方法,但我可以立即发现的错误是,如果您使用例如:e10
作为目标元素,您的var number=id[1];
将不会返回10
,而是1
:)您可以使用库吗?否则,使用document.querySelector和使用css3可能无法选择除该项以外的所有内容,否则您将不得不获取父项并筛选子项等。是的,您可以使用库。还有另一种方法,但我可以立即发现的错误是,如果您使用例如:e10
作为target元素,则您的var number=id[1];
将不会返回10
,而是1
:)您可以使用库吗?否则,使用document.querySelector和使用css3可能无法选择除该项以外的所有内容,否则您必须获取父项并筛选子项等。是的,您可以使用库。+1用于练习(请在您的答案中包含代码)这一行是什么var cell=$(此),parentRow=cell.parent(),container=parentRow.parent();这行变量x=parentRow.children(“td”).index(cell),y=container.children(“tr”).index(parentRow);它的语法与normal非常不同我非常了解jquery…但我不知道的是这个语法变量cell=$(this),parentRow=cell.parent(),container=parentRow.parent();所有逗号是什么for@Trace逗号只是一种跳过编写var:)的方法,意思是:var a=1;var b=2;
==var a=1,b=2;
+1(请在答案中包含代码)这一行是什么var cell=$(this),parentRow=cell.parent(),container=parentRow.parent();这行var x=parentRow.children(“td”).index(cell),y=container.children(“tr”).index(parentRow);它的语法与normal非常不同我非常了解jquery…但我不知道的是这个语法var cell=$(this),parentRow=cell.parent(),container=parentRow.parent()所有的逗号是什么for@Trace逗号只是一种跳过编写var:)的方法,意思是:var a=1;var b=2;
=var a=1,b=2;
$(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");
}
}
});
});