Question

所以我正在学习一些Javascript，并尝试了一些不同的东西来做到这一点，但不能完全得到它。我希望按钮切换或有另一个按钮可以隐藏表中的xml。到目前为止，我已尝试添加另一个带有onclick功能的按钮，并将功能设置为clear。我还尝试添加一个else语句，其函数设置为display = none。我是javascript的新手，我仍然在努力学习它。

// Groups Script
function showGroup() {
	"use strict";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      groupFunction(this);
    }
  };
  xhttp.open("GET", "groups.xml", true);
  xhttp.send();
}

function groupFunction(xml) {
	"use strict";
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Book Title</th><th>Group Leaders</th><th>When Group Meets</th><th>Where Group Meets</th></tr>";
  var x = xmlDoc.getElementsByTagName("GROUP");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("BOOK")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("LEADERS")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("DAY")[0].childNodes[0].nodeValue +
	"<br />" +
	x[i].getElementsByTagName("TIME")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("ROOM")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("group").innerHTML = table;
}
// Leadership Script
function showLeaders() {
	"use strict";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      leaderFunction(this);
    }
  };
  xhttp.open("GET", "leadership.xml", true);
  xhttp.send();
}
function leaderFunction(xml) {
	"use strict";
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Leader</th><th>Ministry</th><th>Email</th></tr>";
  var x = xmlDoc.getElementsByTagName("LEADER");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("MINISTRY")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("EMAIL")[0].childNodes[0].nodeValue +
	"</td></tr>";
  }
  document.getElementById("leaders").innerHTML = table;
}
// ministries script
function showMinistry() {
	"use strict";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      ministryFunction(this);
    }
  };
  xhttp.open("GET", "ministries.xml", true);
  xhttp.send();
}
function ministryFunction(xml) {
	"use strict";
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name of Ministry</th><th>Leader</th><th>Target Audience</th></tr>";
  var x = xmlDoc.getElementsByTagName("MINISTRY");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("LEADERS")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("TARGET")[0].childNodes[0].nodeValue +
	"</td></tr>";
  }
  document.getElementById("ministry").innerHTML = table;
} 
// outreaches script
function showOutreaches() {
	"use strict";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      outreachFunction(this);
    }
  };
  xhttp.open("GET", "outreaches.xml", true);
  xhttp.send();
}
function outreachFunction(xml) {
	"use strict";
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name of Ministry</th><th>Leader</th><th>Target Audience</th></tr>";
  var x = xmlDoc.getElementsByTagName("OUTREACH");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("PLACE")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
	"</td></tr>";
  }
  document.getElementById("outreaches").innerHTML = table;
}
// sermons script
function showSermon() {
	"use strict";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      sermonFunction(this);
    }
  };
  xhttp.open("GET", "sermons.xml", true);
  xhttp.send();
}
function sermonFunction(xml) {
	"use strict";
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name of sermon</th><th>Date</th><th>Who is Preaching</th><th>Notes</th></tr>";
  var x = xmlDoc.getElementsByTagName("SERMON");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
    "</td><td>" +
	x[i].getElementsByTagName("PASTOR")[0].childNodes[0].nodeValue +
	"</td><td>" +
	x[i].getElementsByTagName("NOTES")[0].childNodes[0].nodeValue +
	"</td></tr>";
  }
  document.getElementById("sermon").innerHTML = table;
}
//clear forms
function clearTable() {
	"use strict";
document.getElementById("group").reset();
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Viral Ministries</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="xml.js"></script>
</head>
<body>
<div id="logo">
	<img src="images/logoViral2.png" width="360px" height="180px" />
</div>
		<ul>
			<li><a href="about.html">About</a></li>
			<li><a href="groups.xml">Groups</a></li>
			<li><a href="leadership.xml">Leadership</a></li>
			<li><a href="ministries.xml">Ministries</a></li>
			<li><a href="outreaches.xml">Outreaches</a></li>
			<li><a href="sermons.xml">Sermons</a></li>
			<li><a href="signup.html">Sign Up</a></li>
		</ul>
	<table width="50%" height="auto" id="main" align="center">
		<tr>
			<td>
				<button type="button" onclick="showGroup()">Growth Groups</button><button type="button" onclick="clearForm()">Clear</button>
				<table id="group"></table>
			</td>
			<td>
				<button onclick="showLeaders()">Who Our Leaders are</button>
				<table id="leaders"></table>
			</td>
		</tr>
		<tr>
			<td>
				<button onclick="showMinistry()">What Ministries we Support</button>
				<table id="ministry"></table>
			</td>
			<td>
				<button onclick="showOutreaches()">Upcoming Outreaches</button>
				<table id="outreaches"></table>
			</td>
		</tr>
		<tr>
			<td>
				<button onclick="showSermon()">Upcoming Sermons</button>
				<table id="sermon"></table>
			</td>
		</tr>
	</table>
	
</body>
</html>

Answer 1

如果您只想隐藏表格，可以在点击

上执行操作

function hideTable() {
  document.getElementById('main').style.display = 'none';
}

如果您想再次显示表格，只需使用display = 'block'

创建另一个功能

如何清除XML或表？

1 个答案: