Home > Article > Web Front-end > JS+CSS method to realize table highlighting

JS+CSS method to realize table highlighting

巴扎黑Original: 2017-09-14 11:37:501377browse

本文实例讲述了javascript禁止访客复制网页内容的方法。分享给大家供大家参考。具体如下：

使用JavaScript禁止用户复制网页上的内容，让鼠标选择功能失效，你可以试一下，加入了onselectstart=return false"后，在网页上不能选中文字，浏览者也就无法复制网页内容了。

其实这种方法并不能完全禁止复制，用户可通过网页另存为或更换浏览器来实现复制功能。

实现代码：

&lt;html>
&lt;head>
&lt;title>禁止用户复制网页内容&lt;/title>
&lt;/head>
&lt;body onselectstart="return false">
&lt;table width="782" height="532" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">
 &lt;tr>
  &lt;td width="594" height="165"> &lt;/td>
  &lt;td width="188" height="165"> &lt;/td>
 &lt;/tr>
 &lt;tr>
  &lt;td height="367" align="left" valign="top" style="text-indent:5px; font-size:12px">JavaScript中文网
   &lt;p>学习编程&lt;/p>
   &lt;p>努力成为广大脚本技术爱好者的“家”， &lt;/p>
   &lt;p> 让大家在这里能找到归属感！&lt;/p>
   &lt;p>网站提供大量的asp、php、asp .net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程等特色内容。 &lt;/p>
  &lt;/td>
  &lt;td height="367"> &lt;/td>
 &lt;/tr>
&lt;/table>
&lt;/body>
&lt;/html>

希望本文所述对大家的javascript程序设计有所帮助。

,javascript禁止访客复制网页内容的实现代码,
"

本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下：

这里使用JavaScript+CSS实现表格高亮的功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。

运行效果如下图所示：

具体代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;title>高亮的表格&lt;/title>
&lt;meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" />
&lt;style>
p, td, th {
  font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
  border: 1px solid #D6DDE6;
  border-collapse: collapse;
  width: 80%;
}
.datatable td {
  border: 1px solid #D6DDE6;  
  padding: 4px;
}
.datatable th {
  border: 1px solid #828282;
  background-color: #BCBCBC;
  font-weight: bold;
  text-align: left;
  padding-left: 4px;
}
.datatable caption {
  font: bold 0.9em Arial, Helvetica, sans-serif;
  color: #33517A;
  text-align: left;
  padding-top: 3px;
  padding-bottom: 8px;
}
.datatable tr:hover, .datatable tr.hilite {
  background-color: #DFE7F2;
  color: #000000;
}
&lt;/style>
&lt;/head>
&lt;body>
&lt;table summary="List of new students 2003" class="datatable">
 &lt;caption>Student List&lt;/caption>
 &lt;tr>
 &lt;th scope="col">Student Name&lt;/th>
 &lt;th scope="col">Date of Birth&lt;/th>
 &lt;th scope="col">Class&lt;/th>
 &lt;th scope="col">ID&lt;/th>
 &lt;/tr>
 &lt;tr>
 &lt;td>Joe Bloggs&lt;/td>
 &lt;td>27/08/1997&lt;/td>
 &lt;td>Mrs Jones&lt;/td>
 &lt;td>12009&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>William Smith&lt;/td>
 &lt;td>20/07/1997&lt;/td>
 &lt;td>Mrs Jones&lt;/td>
 &lt;td>12010&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>Jane Toad&lt;/td>
 &lt;td>21/07/1997&lt;/td>
 &lt;td>Mrs Jones &lt;/td>
 &lt;td>12030&lt;/td>
 &lt;/tr>
 &lt;tr>
 &lt;td>Amanda Williams&lt;/td>
 &lt;td>19/03/1997&lt;/td>
 &lt;td>Mrs Edwards&lt;/td>
 &lt;td>12021&lt;/td>
 &lt;/tr>
&lt;/table>
&lt;script type="text/javascript">
var rows = document.getElementsByTagName("tr");
for (var i = 0; i &lt; rows.length; i++) {
  rows[i].onmouseover = function() {
    this.className += " hilite";
  }
  rows[i].onmouseout = function() {
    this.className = this.className.replace("hilite", "");
  }
}
&lt;/script>
&lt;/body>
&lt;/html>

希望本文所述对大家的javascript程序设计有所帮助。

The above is the detailed content of JS+CSS method to realize table highlighting. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summarize the way coffeescript is usedNext article：Summarize the way coffeescript is used

See more

JS+CSS method to realize table highlighting

Related articles