blocks|key|1447858|text|我给自己做了一个自定义的jquery函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447859|Html|1447860|<tr+data-href="site.com/whatever">|code-block|syntax|javascript|1447861|jQuery|1447862|$('tr[data-href]').on("click",+function()+{
++++document.location+=+$(this).data('href');
});|1447863|对我来说很简单也很完美。希望它能对你有所帮助。|1447864|(我知道OP只想要CSS和HTML，但考虑一下jQuery)|1447865|编辑|1447866|同意Matt+Kantor使用data+attr。上面编辑过的答案|1447867|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>I made myself a custom jquery function:</p>

<h2>Html</h2>

<pre><code>&lt;tr data-href="site.com/whatever"&gt;
</code></pre>

<h2>jQuery</h2>

<pre><code>$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});
</code></pre>

<p>Easy and perfect for me. Hopefully it helps you.</p>

<p>(I know OP want CSS and HTML only, but consider jQuery)</p>

<h1>Edit</h1>

<p>Agreed with Matt Kantor using data attr. Edited answer above</p>


blocks|key|1233013|text|如果您使用的浏览器支持CSS，则可以使用CSS将<a>转换为表行：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1233014|.table-row+{+display:+table-row;+}
.table-cell+{+display:+table-cell;+}

<div+style="display:+table;">
++++<a+href="..."+class="table-row">
++++++++<span+class="table-cell">This+is+a+TD...+ish...</span>
++++</a>
</div>|code-block|syntax|javascript|1233015|当然，您不能将块元素放入<a>中。您也不能将其与常规的<table>混合使用|1233016|entityMap^0|O|3|0|0|C|3|R|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>If you're on a browser that supports it you can use CSS to transform the <code>&lt;a&gt;</code> into a table row:</p>

<pre><code>.table-row { display: table-row; }
.table-cell { display: table-cell; }

&lt;div style="display: table;"&gt;
    &lt;a href="..." class="table-row"&gt;
        &lt;span class="table-cell"&gt;This is a TD... ish...&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>Of course, you're limited to not putting block elements inside the <code>&lt;a&gt;</code>.
You also can't mix this in with a regular <code>&lt;table&gt;</code></p>


blocks|key|1232903|text|不能用<a>标记包装<td>元素，但是可以通过使用onclick事件调用函数来实现类似的功能。下面是一个示例here，类似于下面的函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232904|<script+type="text/javascript">
function+DoNav(url)
{
+++document.location.href+=+url;
}
</script>|code-block|syntax|javascript|1232905|并将其添加到您的表中，如下所示：|1232906|<tr+onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>|1232907|entityMap|0|LINK|mutability|MUTABLE|url|http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=312^0|3|3|A|4|P|7|1I|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You can't wrap a <code>&lt;td&gt;</code> element with an <code>&lt;a&gt;</code> tag, but you can accomplish similar functionality by using the <code>onclick</code> event to call a function. An example is found <a href="http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=312" rel="noreferrer">here</a>, something like this function:</p>

<pre><code>&lt;script type="text/javascript"&gt;
function DoNav(url)
{
   document.location.href = url;
}
&lt;/script&gt;
</code></pre>

<p>And add it to your table like this:</p>

<pre><code>&lt;tr onclick="DoNav('http://stackoverflow.com/')"&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>


blocks|key|1448023|text|当我想模拟一个带有链接但又遵守html标准的<tr>时，我会这样做。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1448024|HTML：|1448025|<table>
++++<tr+class="trLink">
++++++++<td>
++++++++++++<a+href="#">Something</a>
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|1448026|CSS：|1448027|tr.trLink+{
++++cursor:+pointer;
}
tr.trLink:hover+{
+++/*TR-HOVER-STYLES*/
}

tr.trLink+a{
++++display:+block;
++++height:+100%25;
++++width:+100%25;
}
tr.trLink:hover+a{
+++/*LINK-HOVER-STYLES*/
}|1448028|这样，当有人将鼠标放在TR上时，所有的行(和这个链接)都会获得悬停样式，并且他看不到有多个链接。|1448029|希望可以帮助别人。|1448030|小提琴HERE|1448031|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/g6qctpwt/^0|M|4|0|0|0|0|0|0|0|3|4|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1C|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|W|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>When i want simulate a <code>&lt;tr&gt;</code> with a link but respecting the html standards, I do this.</p>

<p>HTML:</p>

<pre><code>&lt;table&gt;
    &lt;tr class="trLink"&gt;
        &lt;td&gt;
            &lt;a href="#"&gt;Something&lt;/a&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>CSS:</p>

<pre><code>tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}
</code></pre>

<p>In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.</p>

<p>Hope can help someone.  </p>

<p>Fiddle <a href="https://jsfiddle.net/g6qctpwt/" rel="nofollow noreferrer">HERE</a></p>


blocks|key|1447901|text|这就省去了你在tr中复制链接的麻烦--只要把它从第一个a中找出来就行了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447902|$(".link-first-found").click(function()+{
+var+href;
href+=+$(this).find("a").attr("href");
if+(href+!==+"")+{
return+document.location+=+href;
}
});|code-block|syntax|javascript|1447903|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This saves you having to duplicate the link in the tr - just fish it out of the first a.  </p>

<pre><code>$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
</code></pre>


blocks|key|1447778|text|//Style
++.trlink+{
++++color:blue;
++}
++.trlink:hover+{
++++color:red;
++}

<tr+class="trlink"+onclick="function+to+navigate+to+a+page+goes+here">
<td>linktext</td>
</tr>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1447779|也许是这样的东西？虽然它确实使用了JS，但这是使行(tr)可单击的唯一方法。|unstyled|1447780|除非您有一个具有填充整个单元格的锚定标记的单元格。|1447781|然后，无论如何你都不应该使用表格。|1447782|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

&lt;tr class="trlink" onclick="function to navigate to a page goes here"&gt;
&lt;td&gt;linktext&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>Something along these lines perhaps?  Though it does use JS, but that's only way to make a row (tr) clickable.</p>

<p>Unless you have a single cell with an anchor tag that fills the entire cell.</p>

<p>And then, you shouldn't be using a table anyhow.</p>


blocks|key|1447951|text|我有另一种方法。尤其是当您需要使用jQuery提交数据时|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447952|$(document).on('click',+'#tablename+tbody+tr',+function()
{+++
++++var+test="something";
++++$.post("ajax/setvariable.php",+{ID:+this.id,+TEST:test},+function(data){++++++++
++++++++window.location.href+=+"http://somepage";
++++});
});|code-block|syntax|javascript|1447953|Set+variable在会话中设置您要访问的页面可以读取和操作的变量。|1447954|我真的很喜欢一种直接发布到窗口位置的方式，但我认为这是不可能的。|1447955|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have another way. Especially if you need to post data using jQuery</p>

<pre><code>$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});
</code></pre>

<p>Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.</p>

<p>I would really like a way of posting straight to a window location, but I do not think it is possible.</p>


blocks|key|1448053|text|谢谢你这么做。您可以通过将CSS类分配给行来更改悬停图标，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1448054|<tr+class="pointer"+onclick="document.location+=+'links.html';">|code-block|syntax|javascript|1448055|CSS看起来像这样：|1448056|<style>
++++.pointer+{+cursor:+pointer;+}
</style>|1448057|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Thanks for this. You can change the hover icon by assigning a CSS class to the  row like:</p>

<pre><code>&lt;tr class="pointer" onclick="document.location = 'links.html';"&gt;
</code></pre>

<p>and the CSS looks like:</p>

<pre><code>&lt;style&gt;
    .pointer { cursor: pointer; }
&lt;/style&gt;
</code></pre>


blocks|key|1232880|text|您可以在行中添加一个A标记吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1232881|<tr><td>
<a+href="./link.htm"></a>
</td></tr>|code-block|syntax|javascript|1232882|这就是你要问的吗？|1232883|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Can you add an A tag to the row?</p>

<pre><code>&lt;tr&gt;&lt;td&gt;
&lt;a href="./link.htm"&gt;&lt;/a&gt;
&lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>Is this what you're asking?</p>


<p>I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.</p>


html - table row like a link

jQuery

我无法将我的表行设置为指向某些内容的链接。我只能使用css和html。我尝试了不同的东西，从div到另一个东西，但仍然不能使它工作。

问html -类似于链接的表行
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html -类似于链接的表行EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html -类似于链接的表行
EN