当文本框长度为0时改变HTML表格的颜色?

时间:2016-04-09 10:49:00

标签: php html html-table

我正在尝试根据文本文档中的内容更改表格。如果doc是空的,我希望它有一个黑色文本的白色背景,但如果文档中有内容,则将背景设置为灰色,带有白色文本。它还回应了第二个td中文档中的内容。如果文档中有某些内容但是如果我将文档更改为“”它可以正常工作,但如果我使用我的文本框通过用后退空格清除它来设置此值,则它不起作用。 td仍然是灰色的,带有白色文字,甚至知道它里面没有任何东西显示。有人在这里有任何想法吗?

文本框设置器

<?php
$tb = $_POST['spo']."\r\n";

    if (isset($_POST['submit'])){
        $myFile=fopen("DATA/Spo.txt","w") or exit("Can’t open file!");
        fwrite($myFile, $tb);
        fclose($myFile);
        header("Location: SeniorManagersSiteTour.php");

    }
?>
<body>
    <h1 align="center">Site / Project / Office</h1>
    <form action="SiteProjectOffice.php" method="post" enctype="multipart/form-data" name="FileForm" id="FileForm">
        <input name="spo" type="text" size="size" maxlength="22" <?php $myFile=fopen("DATA/Spo.txt","r") or exit("Can't open file!"); echo 'value="'.fgets($myFile).'"'; fclose($myFile); ?>>

        <div id="btnDiv">
            <input id="submit" name="submit" type="submit" value="Save">
        </div>
    </form>
</body>

$斯波

$myFile=fopen("DATA/Spo.txt","r") or exit("Can't open file!");
$Spo = fgets($myFile);
fclose($myFile);

表格

<table border="0" width="100%" >
                    <tr>
                    <td width="26%" height="20px" <?php if (strlen($Spo) == 0){echo'bgcolor="#FFFFFF" style="color:black;"';}else{echo'bgcolor="999999" style="color:white;"';}?>><strong>Site / Project / Office</strong></td>
                    <td width="26%" height="20px" onclick="location.href='SiteProjectOffice.php'"<?php if (strlen($Spo) == 0){echo'bgcolor="#FFFFFF" style="color:black;"';}else{echo'bgcolor="999999" style="color:white;"';}?>><?php echo $Spo; ?></td>
                    <td width="21%" height="20px"><strong>Contract Number</strong></td>
                    <td width="27%" height="20px" onclick="location.href='ContractNumber.php'"><?php $myFile=fopen("DATA/Cont.txt","r") or exit("Can't open file!"); echo fgets($myFile); fclose($myFile); ?></td>
                    </tr>
                    <tr>
                    <td height="20px" ><strong>Site Manager</strong><td colspan="4" onclick="location.href='SiteManager.php'"><?php $myFile=fopen("DATA/Site.txt","r") or exit("Can't open file!"); echo fgets($myFile); fclose($myFile); ?></td>
                    </tr>
                    <tr>
                    <td height="20px"><strong>Job / Task Description</strong><td colspan="4" onclick="location.href='JobTaskDescription.php'"><?php $myFile=fopen("DATA/Job.txt","r") or exit("Can't open file!"); echo fgets($myFile); fclose($myFile); ?></td>
                    </tr>
                </table>

1 个答案:

答案 0 :(得分:0)

继上面的评论之后,请考虑以下HTML / JS代码段:

    "use strict";
    function byId(id){return document.getElementById(id);}
    
    window.addEventListener('load', onDocLoaded, false);
    
    function onDocLoaded()
    {
        // the change event only fires when we lose focus with a different value
        // than we had when gaining focus.
        // the input event on the other hand, responds to each keystroke, also
        // to cut/paste actions.
    	byId('srcElem').addEventListener('input', onInputChanged, false);
    }
    
    function onInputChanged(evt)
    {
    	var srcElem = byId('srcElem');
        // because the event handler has been attached to the element, the handler
        // can now be considered a part of the element.
        // This means that the 'this' keyword holds a reference to the object that
        // triggered the event. In this case, the event is only attached to one
        // element, so the element that generated the event is unambiguous and
        // must be the <textarea>
        //  We can use the same handler for many different elements though.
        // at that point (and this one too) it's far better and more powerful to
        // use the 'this' keyword.
        // i.e  var curText = this.value;
        // Try adding more textarea elements (each with a unique id) and attaching
        // the same event to each of them. By using the above line of code instead
        // of the below one, the text colour will depend on the length of text in
        // the most recently typed-in box.
    
    	var curText = srcElem.value;
    	
    	// will range from 0 to 350, in steps of 10
    	var curHue = (curText.length % 36) * 10;
    	
    	var tgt = byId('tgtElem');
    	tgt.style.color = 'hsl(' + curHue + ',100%,50%)';
    }

再次,这次作为副本,您可以在页面上运行。 只需点击“#34; show snippet&#34;然后点击&#34;运行Code Snipet&#34;出现的按钮。 :)

&#13;
&#13;
    	<h1 id='tgtElem'>I can change colour...</h1>
    	<hr>
    	Type here to change the colour of the title (colour cycles every 36 characters)<br>
    	<textarea id='srcElem'></textarea>
&#13;
2,n,w,s
&#13;
&#13;
&#13;