小编clo*_*ned的帖子

如何更快地对 HTML 表格进行排序？

我是 Javascript 新手。在尝试了许多 Javascript 和 Jquery 插件对我的 HTML 表进行排序并最终感到失望之后，我决定实现自己的 Javascript 代码来对 HTML 表进行排序。我写的代码是 W3Schools 的更新。


function sortFunctionNumeric(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("reportingTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the …

Run Code Online (Sandbox Code Playgroud)

javascript

Len*_*hra

2019 12-11

10
推荐指数

1
解决办法

1427
查看次数

实现中心预加载器

鉴于这种 :

.loader {
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

Run Code Online (Sandbox Code Playgroud)

我想用这个预加载器position:fixed和中心.所以我做的是:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<body>
  <div class="preloader-wrapper big active loader">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

导致动画: - /

http://jsfiddle.net/kqjy7jbb/6/

html css materialize

gre*_*sin

2019 10-11

7
推荐指数

1
解决办法

5435
查看次数

如何在bootstrap5中进行左填充？

在 bootstrap4 中，我们使用 pl-5 进行左填充，在 bootstrap5 中它不起作用。

<div class="col-md-6 col-9 p-3 pl-5"> in bootstrap5 this code is not working

Run Code Online (Sandbox Code Playgroud)

html css frontend bootstrap-modal bootstrap-4

Muh*_*een

2021 07-27

7
推荐指数

2
解决办法

2万
查看次数

html中如何将文字放在图片右侧

我正在尝试在正文中设置单独的部分，以在其中显示信息，如下所示

使用float: left;没有帮助，它只会弄乱页面布局。

这是我的 html...

#a,
#g {
  background-color: #6d6d6d;
  color: #bdc3c7;
  list-style: none;
}

#pic {
  margin: +5% 0 0;
  border: 3px solid black;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

Run Code Online (Sandbox Code Playgroud)

<div Id="wrapper">
  <section>
    <ul id="a">
      <li>
        <a href="img/appstore.jpg">
          <img src="img/appstore.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>

  <section>
    <ul id="g">
      <li>
        <a href="img/googleplay.jpg">
          <img src="img/googleplay.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>
</div>

Run Code Online (Sandbox Code Playgroud)

html css

Leg*_*ass

2022 08-29

6
推荐指数

1
解决办法

2万
查看次数

Angular -innerHTML，转义少于/大于字符，但保持 <br /> 不变

所以我有一个带有表格的 Angular 8 应用程序，它显示已解析的 XML 内容，但在某些情况下，字符串可以包含
需要解析为 HTML 的标签，但也有其他内容用小于/大于符号支撑，例如. 我正在使用 [innerHTML] 将其注入标签，但这些带支撑的字符串被剪掉了。我试过像这样使用 DomSanitizer：

public sanitizeDsxText(text: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(text);
}

Run Code Online (Sandbox Code Playgroud)

但不幸的是，这也不起作用。有没有人遇到过类似的问题并且可以提供一个简单的解决方案？我将不胜感激:),

编辑：根据要求，更准确地说。我有一个这样的：

<td class="dsx-table__cell" [innerHTML]="item.target?.txt">
</td>

Run Code Online (Sandbox Code Playgroud)

“item.target?.txt”中的文本如下所示： "Cze?? wam, tu bli?niaki dwa <br/> Paprika – siostra, brat <FAR/OFF>" *

添加空格的标签，因为 StackOverflow 也在削减它们。

并且<bt/>像它应该的那样解析到普通<br>标签，但<FAR/OFF>被删除 - 我需要找到一种方法来只解析<br>'s 并将其他字符串留在括号中而不解析。

html javascript typescript angular

grh*_*rhu

2021 07-27

6
推荐指数

1
解决办法

709
查看次数

媒体查询 scss 断点最佳实践

我和我的团队领导就媒体查询的使用发生了一些争执。关于使用媒体查询有两种方法（据我所知）。

方法一：

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .container {
    width: 90%;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 80%;
  }
}

Run Code Online (Sandbox Code Playgroud)

方法二：

.container {
  @media only screen and (max-width: 600px) {
    width: 100%;
  }

  @media only screen and (min-width: 600px) {
    width: 90%;
  }

  @media only screen and (min-width: 768px) {
    width: 80%;
  }
}

Run Code Online (Sandbox Code Playgroud)

我是一名初级开发人员，我发现第二种方法更容易使用和理解。但是我的老板告诉我使用第一种方法。老实说，我到处寻找使用我喜欢的第二种方法的示例项目，但找不到！

所以我的问题是为什么？

在我看来，如果我想在这个例子中添加一些类来包装容器，在方法 1 中我需要在每个断点中添加它，而在方法 …

breakpoints sass media-queries

sam*_*coh

2020 06-23

6
推荐指数

2
解决办法

3475
查看次数

反应维加模块未找到

/node_modules/vega-embed/build/src/embed.js 找不到模块：无法解析“E:\polymerui\polymerui\node_modules\vega-embed\build\src”中的“vega-lite”

在我的依赖项中“react-vega”：“^ 7.1.1”，“vega”：“^ 5.9.1”，“vega-lite”：“^ 4.0.2”，

所以我目前正在 React 工作（显然）。我想将 vega 添加到我的应用程序中。

首先我跑了

npm install vega vega-lite react-vega --save

Run Code Online (Sandbox Code Playgroud)

我没有安装其他 npm。

将 vega 导入到我的组件之一中。

import { Vega } from 'react-vega';

Run Code Online (Sandbox Code Playgroud)

使用示例之一添加了一个组件。

<Vega spec={this.state.spec} data={this.data} signalListeners={this.statesignalListeners} />

Run Code Online (Sandbox Code Playgroud)

也使用示例中的内容

spec: {
      "width": 400,
      "height": 200,
      "data": [{ "name": "table" }],
      "signals": [
        {
          "name": "tooltip",
          "value": {},
          "on": [
            { "events": "rect:mouseover", "update": "datum" },
            { "events": "rect:mouseout", "update": "{}" }
          ]
        }
      ],
    },
    signalListeners: { hover: this.handleHover }

handleHover = (args) …

Run Code Online (Sandbox Code Playgroud)

javascript vega reactjs

use*_*988

2020 01-15

5
推荐指数

0
解决办法

688
查看次数

Google Chrome 106 可拖动导致元素消失

使用拖放元素时，绝对定位元素中包含的大多数其他元素都会从屏幕上消失。

如果我调整窗口大小，这些元素会重新出现，但在开始拖动时会再次消失。

我在最新版本的 Google Chrome（106 和 Beta 版本 107.0.5304.18）以及现在的 Edge 中遇到了这种行为。

我不确定这是否是一个错误（我希望如此），但它已经破坏了我的大多数客户网络应用程序！

编辑：我收到有关它在 Beta 107 上运行的混合报告。对于某些用户而言，该问题仍然存在，而对于其他用户则不存在。

此代码片段演示了该问题，但下面的代码是我用来复制该问题的全部代码。

ul {
  position: absolute;
  top: 0;
}

div {
  margin-left: 200px;
  margin-top: 50px;
}

Run Code Online (Sandbox Code Playgroud)

<ul>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
</ul>
<div draggable="true">
  Please drag me
</div>

Run Code Online (Sandbox Code Playgroud)

你们中有人遇到过这些问题吗？有没有人可以解决这个问题，或者您怀疑这是一个错误，我们应该坚持并希望得到修复？

html javascript google-chrome draggable microsoft-edge

Dan*_*ood

2022 10-06

5
推荐指数

1
解决办法

1187
查看次数

为什么 1 级标题与其他标题大小相同？

我刚刚创建了一个新的 React 应用程序并安装了 tailwindcss 和 antd 库。由于某种原因，我的标题标签没有更改字体。我的代码是：

import { Button } from "antd";

function PageHeader() {
  return (
    <>
      <div className="flex flex-wrap">
        <h1 className="p-5">Hello</h1>
      </div>
    </>
  );
}

export default PageHeader;

Run Code Online (Sandbox Code Playgroud)

然而，字体大小完全没有改变，仍然是小如一个

标签。

html tailwind-css

Ary*_*n V

2021 03-10

3
推荐指数

1
解决办法

2091
查看次数

当页面滚动时，Bootstrap 5 工具提示放置最常见的问题

当强制放置顶部时，我在引导程序中遇到工具提示问题。我现在使用的是最新版本：5.1.3

我尝试创建一个代码片段，但该问题在 codepen 上无法重现，因此我将在此处粘贴代码和视频示例。

function initTooltips() {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(function(tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  });
}

initTooltips();

Run Code Online (Sandbox Code Playgroud)

.section {
  padding-top: 500px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script>

<div class="section">
  <div class="row">
    <div class="col-12 text-center mt-5 pt-5">
      <button type="button" class="btn btn-secondary" id="test-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip with button">
                Tooltip on top
            </button>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

当我向下滚动页面查看该按钮并将鼠标悬停在其上时，工具提示会出现在顶部，其间隙等于滚动位置。