Question

我试过搜索，但我被卡住了。基本上我正在制作一个危险的游戏板;我用表创建的。我想在点击之后更改td的背景颜色。我面临的挑战是：（1）我使用链接指向问题/答案（是的，我知道这可以通过其他方式完成，但我需要学习更多知识来推进，我正在努力）; （2）在搜索答案后，我似乎无法使用我的代码。

这是我的[JSFiddle] https://jsfiddle.net/hLyauL5a/）

Html: 
<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff </th>
      <th>Stuff</th>
      <th>Stuff</th>
      <th>Stuff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="question1.html" id="value">100</a></td>
      <td><a href="question2.html" id="value">100</a></td>
      <td><a href="question3.html" id="value">100</a></td>
      <td><a href="question4.html" id="value">100</a></td>
      <td><a href="question5.html" id="value">100</a></td>
    </tr>
    <tr>
      <td><a href="question6.html" id="value">200</a></td>
      <td><a href="question7.html" id="value">200</a></td>
      <td><a href="question8.html" id="value">200</a></td>
      <td><a href="question9.html" id="value">200</a></td>
      <td><a href="question10.html" id="value">200</a></td>
    </tr>
    <tr>
      <td><a href="question11.html" id="value">300</a></td>
      <td><a href="question12.html" id="value">300</a></td>
      <td><a href="question13.html" id="value">300</a></td>
      <td><a href="question14.html" id="value">300</a></td>
      <td><a href="question15.html" id="value">300</a></td>
    </tr>
    <tr>
      <td><a href="question16.html" id="value">400</a></td>
      <td><a href="question17.html" id="value">400</a></td>
      <td><a href="question18.html" id="value">400</a></td>
      <td><a href="question19.html" id="value">400</a></td>
      <td><a href="question20.html" id="value">400</a></td>
    </tr>
    <tr>
      <td><a href="question21.html" id="value">500</a></td>
      <td><a href="question22.html" id="value">500</a></td>
      <td><a href="question23.html" id="value">500</a></td>
      <td><a href="question24.html" id="value">500</a></td>
      <td><a href="question25.html" id="value">500</a></td>
    </tr>

  </tbody>
</table>


CSS: 



jQuery code: 
$("table tr td").click(function() {
  $(this).css("background", "#626975");
});

我将不胜感激任何帮助！

Answer 1

我看到两个问题。一，你没有在你的HTML中包含jquery或你的javascript文件。你的jsfiddle没有加载jquery。

两个，假设上面只是在Stack Overflow上提出问题的问题，那么在附加事件监听器之前，你还没有等待加载文档。选择器尝试选择尚未存在的内容，并且不附加任何内容。你需要的是：

$(document).on('ready', function(){
  $("table tr td").click(function(e) {
    $(this).css("background", "#626975");
  });
});

工作示例：

＆＃13;

$(()=> {
  $("table tr td").click(function() {
    $(this).css("background", "#626975");
  });
});

＆＃13;

body {
  cursor: pointer;
}
/*gameboard*/

table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  background: #1f293a;
  color: #47ba04;
}
th {
  background: #1f293a;
  color: white;
  font-weight: bold;
  min-width: 200px;
}
td {
  color: #47ba04;
  background: #1f293a;
  min-width: 100px;
  height: 130px;
}
td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: center;
}
a {
  color: #47ba04;
  text-decoration: none;
}
/* For the question pages*/

#question,
#answers {
  width: 100%;
  height: 800px;
  border: 1px solid black;
  background-color: #1f293a;
  color: white;
  font-weight: bold;
}
div.question h2,
div.answers h2 {
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff</th>
      <th>Stuff</th>
      <th>Stuff</th>
      <th>Stuff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="question1.html" id="value">100</a>
      </td>
      <td><a href="question2.html" id="value">100</a>
      </td>
      <td><a href="question3.html" id="value">100</a>
      </td>
      <td><a href="question4.html" id="value">100</a>
      </td>
      <td><a href="question5.html" id="value">100</a>
      </td>
    </tr>
    <tr>
      <td><a href="question6.html" id="value">200</a>
      </td>
      <td><a href="question7.html" id="value">200</a>
      </td>
      <td><a href="question8.html" id="value">200</a>
      </td>
      <td><a href="question9.html" id="value">200</a>
      </td>
      <td><a href="question10.html" id="value">200</a>
      </td>
    </tr>
    <tr>
      <td><a href="question11.html" id="value">300</a>
      </td>
      <td><a href="question12.html" id="value">300</a>
      </td>
      <td><a href="question13.html" id="value">300</a>
      </td>
      <td><a href="question14.html" id="value">300</a>
      </td>
      <td><a href="question15.html" id="value">300</a>
      </td>
    </tr>
    <tr>
      <td><a href="question16.html" id="value">400</a>
      </td>
      <td><a href="question17.html" id="value">400</a>
      </td>
      <td><a href="question18.html" id="value">400</a>
      </td>
      <td><a href="question19.html" id="value">400</a>
      </td>
      <td><a href="question20.html" id="value">400</a>
      </td>
    </tr>
    <tr>
      <td><a href="question21.html" id="value">500</a>
      </td>
      <td><a href="question22.html" id="value">500</a>
      </td>
      <td><a href="question23.html" id="value">500</a>
      </td>
      <td><a href="question24.html" id="value">500</a>
      </td>
      <td><a href="question25.html" id="value">500</a>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

Answer 2

 $('a').click(function(e){
                e.preventDefault();
                $(this).parent().css('background-color','blue');
            });

所以，使用JQuery，如果你点击一个标签，不要跳过任何链接，你就可以阻止默认事件，然后你得到它的父元素就是元素，然后你添加css样式，如图所示。这是我用作例子的html：

＆＃13;

   <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
      <td ><a href="/link">Table</a></td>
    <td bgcolor="#00FF00">$100</td>
  </tr>

＆＃13;

Answer 3

您可以通过在锚标记中添加target="_blank"属性来在新窗口中启动链接：

 <td><a href="question1.html" id="value" target="_blank">100</a></td>

Answer 4

通常，像<a herf="" onclick="">这样的超链接包含两个事件：onclick和herf。执行顺序---＆＃39; onclick＆＃39;在＆＃39; herf＆＃39;面前。所以使onclick方法返回＆＃39; false＆＃39;如果你想要页面，当你单击超链接时，它不会跳转到任何链接。代码如下。

＆＃13;

$(function(){
  $("a").on("click",function(){
    $(this).css("background", "#626975");
    return false;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff</th>
      <th>Stuff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="question1.html" id="value">100</a></td>
      <td><a href="question2.html" id="value">100</a></td>
      <td><a href="question3.html" id="value">100</a></td>
    </tr>
  </tbody>
</table>

＆＃13;

如果单击td中的链接，如何更改td的背景颜色？

4 个答案: