0

このスクリプトに何か問題がありますか? うまくいかないようです。それが機能する場合、誰かがあなたの側でこれを試すことができますか? フィドルを使用して動作しますが、ローカルで実行すると動作しません。

<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/

4

6 に答える 6

2

通常の 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>)。何のためにあるのかわかりませんが、どちらも不適切に配置されており、そのうちの 1 つは開始タグがありません。HTML をさらに操作する前に、HTML を現在の標準に更新することをお勧めします。

于 2012-10-06T07:28:44.667 に答える
0

I finally got it! Thanks to an old friend who walked me through it.. here's the code: 

<!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>
于 2012-10-07T12:28:23.977 に答える
0
于 2012-10-06T07:26:03.130 に答える
0

Try this:

<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>
于 2012-10-06T07:26:22.313 に答える
0

問題は、あなたが混合していることjavascriptですjquery

これを使って 

 $(document).ready(function(){
var widthValue = $(".item").text();
$("hr").css("width",widthValue)
if (parseInt(widthValue, 10) > 90) {
   $("hr").css("backgroundColor","red");
}
​
});
于 2012-10-06T07:26:44.573 に答える
0

それはうまくいくはずです。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'});
}

});

​​

于 2012-10-06T07:40:17.647 に答える