的JavaScript在CSS不工作

-1

我试图使用JavaScript和CSS和HTML立式头，但头高度不动态获取调整，我想我做了一些错误的东西在呼唤JSS的JavaScript在CSS不工作

代码：

<style> 
table, tr, td, th { 
    border: 1px solid #000; 
    position: relative; 
    padding: 10px; 
} 

th span { 
    transform-origin: 0 50%; 
    transform: rotate(-90deg); 
    white-space: nowrap; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
} 
</style> 
<Script> 
$(function() { 
    var header_height = 0; 
    $('table th span').each(function() { 
    if ($(this).outerWidth() > header_height) header_height =   
    $(this).outerWidth(); 
    }); 

    $('table th').height(header_height); 
}); 
</script> 
<html onload="function()"> 
<table> 
    <thead> 
     <tr> 
<th><span>DATE</span></th> 
<th><span>ACCOUNTNAME</span></th> 
     </tr> 
</thead> 
<tbody> 
<tr> 
<TD class=AltLight align=left height="17" width="10%">2017/10/20</TD> 
<TD class=AltLight align=left height="17" width="10%">USA</TD> 
</tr> 
</tbody> 
</table> 
</html>

所需的输出

DATE（垂直题为）帐户（垂直题为
20/10/2017美国

来源

2017-10-20 J.RAM

'outerWidth'或'outerHeight'？ –

您在代码中使用jQuery。 jQuery不是在你的HTML .... –

如何将它们添加到HTML代码 –

你缺少的是程序中的jQuery库。您可以下载该文件并在文件中构建路径。或者你可以简单地在你的页面上放置一个图书馆链接。链接是

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

此外，如果你想添加引导链接。这将使你的页面更加优雅。

<meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
</script>

更新：你在你的脚本标签使用jQuery。所以它需要jQuery库来执行该代码。为此，有两种方法：

下载jQuery库文件并将其复制到程序的war文件中。然后将其链接到你这样的脚本，

<script type="text/javascript" src="(Location_of_folder /filename.js)jquery-1.8.0.min.js"></script>

进阶：脱机访问

另一种方法是使用CDN。这是谷歌CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script>

进阶：获取浏览器的缓存。所以下一次，浏览器将使用缓存的CDN。如果您的Web应用程序中有多个页面，这会使其更快。

来源

2017-10-20 12:43:04

但这需要互联网访问该网站的代码，但服务器没有互联网来加载他们 –

@ J.RAM你可以下载JQuery并嵌入它。 [JQuery下载]（https://jquery.com/download/） –

是的，如果你一直没有网络功能。只有，方法是下载jQuery库。但请注意，上述方法在您的浏览器中具有缓存优势。所以下次你加载它会更快。 –

试试这个

<style> 
th span { 
    transform-origin: 0 50%; 
    transform: rotate(-90deg); 
    white-space: nowrap; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    } 
</style> 

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<table> 
    <thead> 
     <tr> 
<th><span>DATE</span></th> 
<th><span>ACCOUNTNAME</span></th> 
     </tr> 
</thead> 
     <tbody> 
      <tr> 
       <TD class=AltLight align=left height="17" width="10%">2017/10/20</TD> 
       <TD class=AltLight align=left height="17" width="10%">USA</TD> 
      </tr> 
     </tbody> 
    </table> 
<Script> 
    $(document).ready(function() { 
    var header_height = 0; 
    $('table th span').each(function() { 
    if ($(this).outerWidth() > header_height) header_height =   
    $(this).outerWidth(); 
    }); 

    $('table th').height(header_height); 
}); 

</script> 
</body> 
</html>

来源

2017-10-20 12:56:30 Mohsen

的JavaScript在CSS不工作

回答

相关问题