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

Posted 2023-02-24

【中文标题】将HTML写入字符串，组合字母和字符串

【英文标题】：Writing HTML into string, combine letters and strings

【发布时间】：2017-03-04 03:38:58

【问题描述】：

所以真的我在这里有 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

例如，如果 over 是 t33，那么 t31 和 t13 也会被突出显示。我将 id 系统编码到循环中，它似乎工作正常。一个问题我在寻找分开时意识到，一旦将所有内容添加到数据库中，将有超过 300 行和至少 30 列，并且可以在任何给定时间添加行和列。这意味着它不像查看 t44 那样简单，因为实际上我们可以查看 t25324。我解决这个问题的想法是使用 r253c24 之类的格式，而不是使用 t 表示表格，这样如果您将 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>

我试图用谷歌搜索答案，但不知道如何正确表达我试图做的事情以使谷歌搜索成功。提前感谢大家的帮助！

【问题讨论】：

您应该查看 CSS 和 :hover-selector。根本不需要 id 或 javascript。您可以执行以下操作：tr:hover td ... 等。一些信息：w3schools.com/cs-s-ref/sel_hover.asp

我正在使用 CSS 并从悬停功能开始，但有没有办法突出显示行中的第一个单元格和列中的第一个单元格？ CSS中有没有办法将

单元格更改为可在 :click 上编辑？请记住，我还将想办法在更改后将值推回数据库。我相信 id 能够使用 ajax 将值推回数据库。

您同时提出了太多问题。分解并提出一个特定的问题。回答完毕后，用下一个问题创建一个新问题，依此类推。对每个人来说都会更容易。第一个问题：你可以给第一个 td 一个类：<td class="first-cell">...</td>，然后使用：tr:hover td.first-cell ... 或使用伪选择器tr:hover td:first-child ...

我不确定您是否完全按照我所说的那样突出显示行中的第一个单元格和突出显示的单元格的列中的第一个单元格。以我在原始帖子中使用的 4x4 示例为例，如果我将鼠标悬停在 t43 上，我还希望突出显示 t13（产品名称）和 t41（日期）。在这么小的样本中它可能看起来毫无意义，但想象一个 100 x 100 的表格，它会更有意义。在这种情况下，给每一行中的第一个单元格提供相同类别的“第一个单元格”不会有帮助吗？我不确定上面的 CSS 代码是否会有所帮助？

【参考方案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 的帖子。是我修改元素类的方法。

【讨论】：

这是 JavaScript 吗？当我尝试提醒 var selects_rows = $(this.classList.item(1));我只是在警报中得到 [Object Object]？

是的。但我正在使用一个名为JQuery 的库。您可以使用 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 将其添加到您的 HTML。

@Brandon 使用 console.log() 而不是 alert()，然后在开发工具 (F12) 中打开控制台以查看对象属性。警报只会向您显示任何对象的[Object Object]。或者，您可以使用alert(JSON.stringify(object)) 在警报提示中打印对象属性和值的字符串。 @MariosanGar 他已经在他的问题中使用 jQuery。

【参考方案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 是否不是最好的，这可能是问题吗？我看到了一些额外的突出显示，但并不完全是我想要的。我用你添加的代码转储了我的代码（ tweeked 它试图让它为我工作。jsbin.com/wagosesiyi/edit?html,output 还有一个指向实时输出的链接，所以你可以看到我在这个 jsbin 代码中看到的确切内容。@987654325 @ 请注意，日期和产品单元格都是 我还是这个网站的新手，不确定我是不是第一次给你加了标签。 @Brandon 在我的回答中查看Edit 2。此外，您通常必须输入@ 字符，然后以mark 开头，它应该让您从自动完成类型列表中选择我的名字，以便标记我。如果该列表没有出现，可能是因为它知道我无论如何都会收到通知（因为您正在评论我的回答）。 这是完美的男人！太感谢了！我试图给你代表但不能因为我自己不到 15 个代表。你真是太棒了，伙计！