Question

很难解释，所以我创建了一个例子：

我的想法是在相应输入运行时更改每列的颜色......

如果有人有更好的想法这样做 - 请告诉我！

当我关注输入时，我需要列的当前类。

第一列输入，获取RED列的类
和第二个，获取BLUE列的类
所以继续......

因为如果我上课了，那么我可以用这个类操作任何东西。

代码在这里：

$(".inputTest").focusin(function(){
    var class = $(this).closest('.tableList')
                    .children().children().children('.auxClass')
                    .attr('class')
                    .split(' ')[0];
                alert(class);
});

这是主要代码，我尝试了很多东西，但没有。

由于

Answer 1

首先，我添加一个外表来分割左侧和右侧的页面。这样，红色边框下方的输入和蓝色边框下方的输入都有自己的表格。

然后，您可以搜索最近的表格下面的第一个td：

$(".inputTest").focusin(function(){
    var class = $(this).closest('table').find('td:eq(0)').attr('class');
    alert(class);
});

Click for working jsfiddle example.

Answer 2

试试这个：

$(".inputTest").focus(function(){
    var class = $(this).closest('table').parent().attr('class');
    alert(class);
});

编辑：哦，我刚刚意识到你的输入不在你的桌子里面，我认为你很难将它们与当时的桌子/柱子相匹配。您需要添加一个公共属性来识别它们。

Answer 3

正如其他答案中所提到的，您的输入实际上并不与红色/蓝色边框表相同的“列”，但您可以使它们使用主表上的<col>元素，然后使用您可以将输入与列匹配的索引值

Working Example

HTML - 唯一的补充就是开头的两个<col>元素

<table width="100%" border="1" class='tableList'>
<col span="2" class="left">
<col span="2" class="right">

    <tr>
        <td class="101 auxClass" width="261px" colspan="2" style="border: solid red;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">Something</td>
                    </tr>
                    <tr>
                        <td width="78px">Something 2</td>
                        <td>Total</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td class="102" width="261px" colspan="2" style="border: solid blue;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">
                       Something 3
                        </td>
                    </tr>
                    <tr>
                        <td width="78px">Something 4</td>
                        <td width="75px">Total 2</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
</table>

<强> CSS：

col.current {background: #eee;}

<强>的jQuery

$(".inputTest").focusin(function(){
    var colidx = $(this).closest('td').index();


     if (colidx == 1) {
          $("col").removeClass('current');
          $("col.left").addClass('current');
     }  else if (colidx == 3) {
          $("col").removeClass('current');   
          $("col.right").addClass('current');
     }

});

你的主表实际上是4列，你需要将它分成两列，每列两列，每一列的输入位于每一半的第二列

jQuery正在查找输入的父td的索引 - 主表中有四列，因此td的索引将为0,1,2或3 - 并且input要么位于单元格索引1还是单元格索引3中。当它找到哪一个时，它会向相关的col元素添加一个类，您可以向其添加背景突出显示。

请注意，您可以应用于col元素的CSS是有限的，请参阅：http://www.quirksmode.org/css/columns.html，因为这取决于您想要做什么

但是我认为你可以从中找到td指数0＆amp; 1，或td指数2＆amp; 3如果需要

从列表jquery中获取最接近的类

3 个答案:

Working Example