Question

我在表格单元格中放了一个链接，但它没有用。我尝试使用javascript函数打开一个窗口，我更喜欢这个窗口，但是它也没有用。所以我四处寻找信息并找到了这个SO页面：How can I make a link from a <td> table cell。

我尝试了那些似乎适用的方法，加上这些方法的一些变化，但它们都没有起作用;虽然我确实得到了一个简单的演示工作。在该页面上向我提出的建议是，我的代码中的其他内容导致了问题，这似乎对我而言。

我将代码放在下面，也许有人可以提供帮助？我不在乎它是什么样的链接 - 无论是整个单元格，还是单词 - 只要它带我到达所需的页面。

<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <p class = "nextscript"> There is a lot of correspondence blah, blah...
          <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>

        <p style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; "> </p>
              <li>Item 3 yet more text</li>
       </ul>
    </p>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>

这是我想要链接的地方 - 显示的代码是其中一个建议，但它对我不起作用：

   <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td
 </tr>

（希望上面的代码是正确的.tr和td标签中的小错误似乎没有什么区别，但可能会产生误导。）

Answer 1

错误与元素结构有关。＆＃39; P＆＃39;元素不能成为＆＃39; ul的孩子。其他则是由于类似的标签和范围不匹配。

刚刚改进了代码。它在这里工作

块引用

    <body>
<table style = "width: 100%; margin-top: 20px">
<tr>
   <td>
      <a class = "headscript"> Your Communications</a>
        <div class = "nextscript"> There is a lot of correspondence blah, blah...
        <ul class = "nextscript" style = "list-style-position: inside; margin-left: -20px">
              <li>Item 1 text stuff </li>
              <li>Item 2 more text   </li>
              <li style = "border-bottom-height:1px; border-bottom-color: #1E6655; border-bottom-style: inset; ">Item 3 yet more text</li>
       </ul>
    </div>
  </td>

  <td style = "padding-left:20px;">
    <a class = "headscript"> Your Cost </a> 
      <p class = "nextscript"> some text here</p>

    <table style = "width: 100%; border-collapse: collapse; table-layout:fixed" class = "nextscript">
    <tr>
        <td> <b> Your annual revenue</b></td>
        <td> <b>Your costs </b> </td>
  </tr>
  <tr>
       <td> Up to $50</td>
       <td> $whatever </td>
  </tr>  
     <tr>  
      <td style = "padding: 0"> additional charges
         <a href="overcharges.cfm">
            <div style="height:100%;width:100%"> more info
            </div>
        </a>
      </td>

     <td> lots of text here, so this cell is much longer than the one with the desired link 
     </td>
 </tr>
 </table>
  </td>
</tr>
</table>

这里的工作示例 https://jsfiddle.net/aman9753/jya5L1t5/

HTML在td中制作链接时遇到麻烦

1 个答案: