Question

所以我真的在这里有2个问题。我正在构建一个从数据库表中提取信息并将其放入HTML表格的站点，在那里我可以单击一个单元格并对其进行编辑。我还在处理点击和编辑但是我刚刚添加了一个Jquery悬停来改变单元格悬停时的颜色。我还试图突出显示日期（行中的第一个单元格）和产品（列中的顶部单元格），这样当电子表格变大并且您将鼠标悬停在单元格上时，也很容易看到产品和日期。我想知道在哪里分配每个单元格和id，使用基于数字的id来识别它在单元格中的位置。例如，如果有4行和4列，则ID将如下所示，然后将id拉开以查看突出显示的其他内容：

t11 t12 t13 t14
t21 t22 t23 t24
t31 t32 t33 t34
t41 t42 t43 t44

例如，如果结束是t33，则t31和t13也将突出显示。我将id系统编码到循环中，似乎工作正常。我认识到的一个问题是，当选择拆分时，将会有超过300行，并且一旦将所有内容添加到数据库中，至少有30列，并且可以在任何给定时间添加行和列。这意味着它不像查看t44那么简单，因为我们可以真实地看到t25324。我想解决这个问题的方法不是使用表格，而是使用像r253c24这样的格式，这样如果你选择id，你就会知道行和列。这段代码非常适合制作t44 id，但是当我尝试在变量之间添加c时，代码搞砸了，我该如何解决这个问题呢？

<?php
                if (($a == 1) or ($b == 1)) {

                    $scheduletext.="<th id=t$b$a>".$row[$a]."</th>";

                } else {

                    $scheduletext.="<td id=t$b$a>".$row[$a]."</td>";   

                }
?>

当我尝试它显然不起作用，因为PHP然后认为$ bc是变量，这是空白所以我最终得到r $ a。我如何将它们拼凑在一起，以便在$ scheduletext在文件后面用HTML打印时正确输出？

我的问题的第二部分然后变成了我将id保存到字符串（idvalue）（参见下面的Jquery代码）我如何选择它以找出行和列？

<script type="text/javascript">

    $("td").hover(function(){

        var idvalue=($(this).attr('id'));

        $(this).addClass("highlight");

        $()

    },function(){

        $(this).removeClass("highlight");

    });

</script>

我试图谷歌答案，但无法弄清楚如何正确地说出我想要做的任何成功谷歌搜索。提前感谢大家的帮助！

Answer 1

我会尝试帮助解决你的第二个问题，因为我知道注意PHP（Jon也没有）。

首先，我认为您对高亮的想法很好，但是当表格很大时，只突出显示一个单元格是不够的（例如，查看产品）。我建议你突出显示所有行和所有列，甚至是单元格（更暗）。

为此，请为列添加类c1，c2，c3，c4;和r1，r2，r3 ...用于行。然后，您只需添加hover选项。

脚本可以如下：

<script>

    $('.cell').hover(
        function mouse_in () {
            // items 1 and 2 must be the column and row
            // I would use 0 for 'cell' class

            var selects_rows = $(this.classList.item(1));
            for(var i = 0; i < selects_rows.length; i++){
                selects_rows[i].className += ' with_highlight';
            }

            var selects_columns = $(this.classList.item(2));
            for(var i = 0; i < selects_columns.length; i++){
                selects_columns[i].className += ' with_highlight';
            }
            this.classList.toggle('w_highlight_darker');
        },
        function mouse_out () {

            var selects = $('with_highlight');
            for(var i = 0; i < selects_rows.length; i++){
                selects_rows[i].className = '';
            }

            this.classList.toggle('w_highlight_darker');
    });

</script>

感谢this帖子。是我在哪里修改元素的类。

Answer 2

使用索引可能更容易，而不是根据列和行给出单元格ID。例如，当您将鼠标悬停在表格中的单元格上时，可以使用它来突出显示列标题和行标题：

//when hovering over a cell that's not the first cell in the row
$('td:not(:first-child)').hover(
    function() {//on mouse in
    //get the current row number (add one for use with nth-child)
    var row = $(this).closest('tr').index() + 1;
    //add hover class to the row's first cell (date column)
    $('tbody tr:nth-child(' + row + ')').find('td').first().addClass('hover');

    //get the current column number (add one for use with nth-child)
    var col = $(this).index() + 1;
    //add hover class to the header row's corresponding cell
    $('thead th:nth-child(' + col + ')').addClass('hover');
    },
  function() {//on mouse out
    //same as mouse in - gather row index
    var row = $(this).closest('tr').index() + 1;
    //remove hover class from row's first cell
    $('tbody tr:nth-child(' + row + ')').find('td').first().removeClass('hover');

    //same as mouse in - gather cell index in row
    var col = $(this).index() + 1;
    //remove hover class from header row's corresponding cell
    $('thead th:nth-child(' + col + ')').removeClass('hover');
  }
);

你可以在这个小提琴上看到它：https://jsfiddle.net/8Loeob4o/

编辑：真的不需要先找到行名称来突出显示第一个单元格...只是查看了代码。我更新了小提琴：https://jsfiddle.net/8Loeob4o/1

编辑2：更整洁，特别是你的html输出（https://jsfiddle.net/qLjvvct2/1/）：

$("td").hover(
  function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
  },
  function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
  }
);

将HTML写入字符串，组合字母和字符串

2 个答案: