Question

我有一个脑死亡的日子，我正试图想办法让这个变小，我试过的一切都没用。我知道必须有更好的方法来做到这一点所以我想我会在这里问。

关于jQuery缓存的任何提示都会很棒（我正在努力使大约225行jQuery尽可能小，所以任何事情都可以提供帮助！

$(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(2)").css("text-align","center").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(3)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(4)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(5)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(6)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(7)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(8)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

对不起我的可怕代码，随时给我任何你能想到的提示！

杰夫

Answer 1

只需将带有边框样式的CSS类应用于所有单元格（根本不需要jquery）：

<style>
  .tableMap td
  {
    border: 1px solid black;
    border-left: none;
    border-top: none;
  }
</style>

然后，您可以将特定样式仅应用于所需的两个项目：

$(".tableMap td:nth-child(2)").css("text-align","center");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-right:none;");

要记住的一件好事是只在需要时使用javascript / jQuery。尽可能直接使用HTML / CSS，您的网站将以这种方式表现得更好。

Answer 2

看起来好像是

$(".tableMap td").attr("style","border-right:1px solid black; border-bottom:1px solid black;");

然后

$(".tableMap td:nth-child(2),.tableMap td:last").css("text-align","center");

会更简单

Answer 3

未经测试 - 但我认为你可以看到我得到的东西......

$(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td").children().lt(9).gt(1).attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

结合jQuery语句

3 个答案: