控件包括按钮A,按钮B(默认隐藏)，文本域C
点击页面上的按钮A，后台会执行一个shell脚本，shell执行完之后会把类似日志的结果返回到文本域C中，如果文本域C中包含fail关键字，默认隐藏的按钮B显示fail，并且按钮颜色是红色，反之隐藏的按钮B显示pass，颜色是绿色，小弟不太会js，谁能给个简单的示例代码，谢谢！
点击页面上的按钮A，后台会执行一个shell脚本，shell执行完之后会把类似日志的结果返回到文本域C中，如果文本域C中包含fail关键字，默认隐藏的按钮B显示fail，并且按钮颜色是红色，反之隐藏的按钮B显示pass，颜色是绿色，小弟不太会js，谁能给个简单的示例代码，谢谢！
执行shell脚本可以使用ajax，自己研究下，然后通过判断ajax的返回值responseText是否包含fail内容就行了
<script type="text/javascript">
function test(){
var cVal = document.getElementById("C").value;
var bb = document.getElementById("B");
if(cVal.indexOf("fail") > -1){
bb.value='fail';
bb.style.display='';
bb.style.backgroundColor="red";
}else{
bb.value ='pass';
bb.style.display='';
bb.style.backgroundColor="green";
}
}
</script>
<body >
<input type="button" onClick="test();" id="A" value="A">
<input type="button" id="B" value="B" style="display:none;">
<input type="text" id="C" value="xxx fail xxxxxx">
</body>
自己贴出去看下效果，呵呵，我看还行
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rhapsody:Monitor</title>
<link href="./images/application-3eed4b9c8db3e691a3a0ff3e1fcfa2b2.css" media="screen" rel="stylesheet" type="text/css">
<link type="text/css" href="./images/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./images/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./images/ui.core.js"></script>
<script type="text/javascript" src="./images/ui.datepicker.js"></script>
<script type="text/javascript">function startTimer(){
setInterval("checkReport()",3000);
}function checkReport(){
var doc;
if(document.all){//IE
doc = document.frames["resultFrame"].document;
}else{//Firefox
doc = document.getElementById("resultFrame").contentDocument;
}
var resultValue = doc.body.innerHTML;
alert(resultValue);
var button = document.getElementById("report");
//var element = document.getElementById("showElement");
if(resultValue.indexOf("Fail") != -1){
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Fail';
button.stlye.display='';
button.style.backgroundColor = 'red';
}else{
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Pass';
button.stlye.display='';
button.style.backgroundColor = 'green';
}
} function clickDisplayCheckbox() {
var dbox = document.getElementById("displayCheckbox");
if (dbox.checked) {
document.getElementById("iframe").body="";
document.getElementById("iframe").style.visibility="visible";
} else {
document.getElementById("iframe").style.visibility="hidden";
}
}
</script>
</head>
<body onload='clickDisplayCheckbox()'>
<div class="login-layout" id="container">
<div id="header">
<div id="header-frame">
<div id="header-content">
<div id="logo">
<a class="ajax" href="https://secure-www.rhapsody.com/">
<img alt="Rhapsody" height="33" src="./images/logo.png" title="Rhapsody" width="153">
</a>
</div>
</div>
</div>
</div>
<div id="middle">
<div id="main-container">
<div id="main">
<div id="focus">
</div>
<div id="login-page" style="height: 505px; ">
<div id="login-module" style="left: 10px; top: 40px; ">
<input type="checkbox" id="displayCheckbox" onclick="clickDisplayCheckbox()"> Display Output
<form action='monitorServlet' method='post' id="login-form" name="login-form" target="resultFrame" onsubmit="return checkValue();">
<h2 class="general">
Monitor Service
</h2>
<div id="noticebox" style="display: none; ">
<div id="notice"></div>
</div><div class="form-item">
<div class="remember-me" style="text-align: right;width:65px;">
<span style="float:left;padding-top:10px;">
Country:
</span>
<span style="float:left;padding-top:10px;">
<select name="countrylist">
<option selected>US</option>
<option>DE</option>
<option>GB</option>
</select>
</span>
</div>
<div class="remember-me" style="text-align: right;width:265px;">
<input id="monitor" name="monitor" tabindex="4" type="submit" onclick='this.form.act.value="monitor";this.form.target="resultFrame";startTimer()' value="Monitor">
</div>
<div class="remember-me" style="text-align: right;display:none;width:265px;">
<input id="report" name="report" tabindex="4" type="button" value="Pass">
</div>
</div>
<input type="hidden" name="act">
</form>
</div>
<div id="login-form-log" style="top: 40px; ">
<iframe id="resultFrame" name="resultFrame" height="300" width="600" src="">
</iframe>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-frame">
<div id="footer-copyright">
© 2012 Rhapsody International
</div>
</div>
</div>
</div>
</body>
</html>我自己写了一个，但是有点问题，谁能帮忙看看！
说明一下，点击id=monitor button，后台会执行一个shell脚本，结果会返回到id="resultFrame"的iframe中，我们根据返回的内容里面是否含有某一关键字，比如含有Fail,我们会让默认隐藏的按钮id="report"显示为红色，value="Fail"，不含有Fail就让id="report"的按钮显示为绿色，我写了个js的实现，但是按钮不能显示出来且没有变颜色，但是按钮的value值是可以取到的，另外，如果要是用jquery+ajax来写的话应该怎么改？
if (resultValue.indexOf("Fail") != -1) {
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Fail';
button.parentNode.stlye.display = ''; ////////设置容器显示而不是button
button.style.backgroundColor = 'red';
} else {
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Pass';
button.parentNode.stlye.display = ''; ////////设置容器显示而不是button
button.style.backgroundColor = 'green';
}AJAX实现
<script type="text/javascript">
function ajaxcheck(btn) {
var f = btn.form;
$.ajax({ url: 'monitorServlet', data: $(f).serialize(), type: 'POST', dataType: 'html'
, success: function (data) {
var fail = ata.indexOf("Fail") != -1;
$('#report').val(fail ? 'Fail' : 'Pass').css('backgroundColor', fail ? 'red' : 'green').parent().show()
}
, error: function (xhr) { alert('动态页出错\n\n' + xhr.responseText); }
});
return false; //注意return false阻止表单提交，因为按钮类型为submit的会提交表单
}
</script>
<input id="monitor" name="monitor" tabindex="4" type="submit" onclick='this.form.act.value="monitor";return ajaxcheck(this)' value="Monitor">