Question

这个脚本有问题吗？似乎没有用。如果它有效，有人试试这个吗？它使用小提琴工作，但当我在本地运行时它不起作用。

<HTML>

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

document.ready(function(){
var widthval = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);
alert(widthval);
$hr.width(widthval);

if (widthval > 90) {
    $hr.css('background-color', 'red');}

});

</script>

</HEAD>

<BODY BGCOLOR="#EFEFFF">


<TABLE id="table_id" BORDER="1" CELLPADDING="2" CELLSPACING="2">
<TR>
 <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
</TR>
<TR>
 <TH>Server</TH>
 <TH>Drive</TH>
 <TH>Percent Free Space</TH>
 <TH>Size Free Space</TH>
 <TH>Status</TH>
</TR>


<TR>
 <TD>%server%</TD>
 <TD>%drive%</TD>
 <TD class="item">50%</TD>
 <TD>%fspace%</TD>
 <TD width=200 style="border: 2px solid silver;padding:none">
 <hr style="color:#c00;background-color:blue;height:15px; border:none; margin:0;" align="left"/> </TD>
</TR>
<TR>

</TABLE>

</BODY>
</HTML>

这是我想要完成的jsfiddle链接。
http://jsfiddle.net/XhxkX/7/

Answer 1

您的代码无效，因为您正在将常规JavaScript DOM方法与jQuery混合使用。

这应该会更好一点：

var width = parseInt($('.item').eq(0).text(), 10);
var $hr = $('hr').eq(0);

$hr.width(width);

if (width > 90) {
    $hr.css('background-color', 'red');
}

演示：http://jsfiddle.net/XhxkX/10/

此外，HTML中有一些无效标记（<LPFOOTER>和<LPHEADER>）。我不确定它们的用途是什么，但它们都放置不当，其中一个缺少开口标签。我建议您在使用HTML之前将HTML更新为当前标准。

Answer 2

$(document).getElementsByTagName("hr")[0].style.width = widthValue;

应该是：

document.getElementsByTagName("hr")[0].style.width = widthValue;

Answer 3

试试这个：

<HEAD><TITLE>Server Disk Alert</TITLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="../../../Backup/2012/Web Projects/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var widthValue = document.getElementsByClassName("item")[0].innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

if (parseInt(widthValue, 10) > 90) {
    document.getElementsByTagName("hr")[0].style.backgroundColor = "red";
}

});
</script>
</HEAD>

Answer 4

问题在于您正在混合javascript和jquery

使用此

 $(document).ready(function(){
var widthValue = $(".item").text();
$("hr").css("width",widthValue)
if (parseInt(widthValue, 10) > 90) {
   $("hr").css("backgroundColor","red");
}

});

Answer 5

应该工作的

我习惯了不同的方法来展示如何访问和操作DOM元素。我希望有所帮助。

   <script type="text/javascript">

$(document).ready(function(){
var widthValue = parseInt($('.item').eq(0).text());
$('hr').eq(0).css('width',widthValue) ;

if (parseInt((widthValue.replace('%','')/10)* 10) > 90) {
   $('hr').eq(0).css({'background-color':'red'});
}

});

Answer 6

我终于明白了！感谢一位老朋友带我走过它..这是代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Critical Server Disk Space</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.bar').each(function(i){

                    var width = parseInt($('.item').eq(i).text(), 10);
                    var hr = $(this).eq(i);

                    $(this).width(width);

                    if(width >= 90){
                        $(this).css('background-color', 'red');
                    }
                });

            });

            //window.onload = init();
        </script>
        <style type="text/css">
            hr{
                border:none;
                background:blue;
                height:15px;
                margin:0px;     
                text-align:left;
            }
            .border{border:1px solid #CCC; padding:0px; width:100px;background:#FFF;}
        </style>
    </head>
    <BODY BGCOLOR="#EFEFFF" >
        <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2">
            <TR>
             <TH COLSPAN="5" ALIGN="CENTER">Critical Server Disk Space</TH>
            </TR>
            <TR>
             <TH>Server</TH>
             <TH>Drive</TH>
             <TH>Percent Free Space</TH>
             <TH>Size Free Space</TH>
             <TH>Status</TH>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">50 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">30 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">95 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
            <TR>
             <TD>%server%</TD>
             <TD>%drive%</TD>
             <TD class="item">80 <!-- 2% --></TD>
             <TD>%fspace%</TD>
             <TD width=200">
              <div class="border"><hr class="bar" /></div>
             </TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>
</html>

内联JavaScript无法正常工作

6 个答案: