开启我们的生命+代码
成功修改网页两处实现打开选定物种
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="Artocarpus, RNA-seq, Transcriptome">
<meta name="Description" content="ArtocarpusGD, Artocarpus, Genomic Database">
<script type="text/javascript" src="javascript/query.js"></script>
<script type="text/javascript" src="javascript/logoLink.js"></script>
<script type="text/javascript" src="../../Artocarpus/javascript/expGene.js"></script>
<link href="css/buttonstyle.css" rel="stylesheet" type="text/css">
<link href="css/dropdown.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/theme.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript/menu-loader.js"></script>
<script src="javascript/popup.js"></script>
<title>ArtocarpusGD - RNA-seq Project Information</title>
<style>
/* 标签页样式 */
.tab-container {
text-align: center;
padding: 20px;
background-color: #ffffff;
}
.tab-links {
font-size: 16px;
font-weight: bold;
}
.tab-links a {
color: #0066cc;
text-decoration: none;
padding: 6px 8px; /* 从10px 20px改为8px 10px，减少左右间距 */
cursor: pointer;
transition: color 0.3s;
}
.tab-links span {
padding: 0 1px; /* 新增：控制 || 符号两侧的间距 */
color: #666;
}
.tab-links a:hover {
color: #003d7a;
text-decoration: underline;
}
.tab-links a.active {
color: #003d7a;
text-decoration: underline;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* RNA-seq Project Information 标题样式 - 新增 */
.tableborder h2 {
font-size: 18px; /* 调整标题大小 */
margin: 10px 0;
}
</style>
<script language="JavaScript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
if (subMenu) subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
if (subMenu) subMenu.style.display = "none";
}
// 标签页切换函数
function showTab(tabName) {
// 隐藏所有标签内容
var contents = document.getElementsByClassName('tab-content');
for (var i = 0; i < contents.length; i++) {
contents[i].classList.remove('active');
}
// 移除所有标签链接的active类
var links = document.querySelectorAll('.tab-links a');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('active');
}
// 显示选中的标签内容
document.getElementById(tabName).classList.add('active');
// 添加active类到点击的链接
event.target.classList.add('active');
}
// Gene Expression 相关的JavaScript函数
function updateFormAction() {
var rnaSelect = document.getElementById('rna');
var form = document.getElementById('RNAForm');
if (!rnaSelect || !form) return;
var selectedOption = rnaSelect.options[rnaSelect.selectedIndex];
console.log("选择的选项:", selectedOption.text);
// 从data属性中读取值
var projectid = selectedOption.getAttribute('data-projectid');
var experiment = selectedOption.getAttribute('data-experiment');
var description = selectedOption.getAttribute('data-description');
// 更新隐藏字段
if (projectid && experiment && description) {
document.getElementById('hidden_projectid').value = projectid;
document.getElementById('hidden_experiment').value = experiment;
document.getElementById('hidden_description').value = description;
console.log("已更新 projectid 为:", projectid);
console.log("已更新 experiment 为:", experiment);
console.log("已更新 description 为:", description);
}
}
function validateForm() {
// 确保隐藏字段已更新
updateFormAction();
var rnaSelect = document.getElementById('rna');
if (!rnaSelect || rnaSelect.value === 'selectspecies') {
alert("请选择一个SRA数据集");
return false;
}
// 检查是否有基因ID输入
var geneIDField = document.RNAForm.GeneID;
if (!geneIDField.value.trim()) {
alert("请输入基因ID或使用Show example IDs选择示例ID");
return false;
}
console.log("表单验证通过，准备提交");
return true;
}
// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
// ★★★★★★ 26.2.28新增下一句：文章发表马年后修改使得直接加载生成含有选定物种的页面，并且可以click生成示例基因ID，初始化 SelectValue 为当前默认选中的物种值 ★★★★★★
inputText();
// 默认显示第一个标签页
document.getElementById('geneExpression').classList.add('active');
document.querySelector('.tab-links a:first-child').classList.add('active');
// 设置Gene Expression表单的事件
var rnaSelect = document.getElementById('rna');
if (rnaSelect) {
updateFormAction();
}
var form = document.getElementById('RNAForm');
if (form) {
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault();
}
});
}
// 注入调试功能扩展函数
var originalInputText = window.inputText;
var originalCheckboxOnclick = window.checkboxOnclick;
if (originalInputText) {
window.inputText = function() {
originalInputText.apply(this, arguments);
console.log("Species选择改变");
};
}
if (originalCheckboxOnclick) {
window.checkboxOnclick = function(checkbox) {
console.log("Checkbox点击，当前状态:", checkbox.checked);
originalCheckboxOnclick.apply(this, arguments);
};
}
});
</script>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#fff">
<tr bgcolor="#B3C2C7">
<td align="center" height="60">
<map name="FPMap0">
<area href="index.html" shape="rect" coords="42, 2, 342, 59">
</map>
<img usemap="#FPMap0" runat="server" src="images/logo.gif" hspace="0" vspace="0" border="0" width="1200" height="60">
</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td class="menu" align="center" height="30">
<table width="1200px">
<tr>
<td>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Genome</a>
<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#"><i>Artocarpus hirsutus</i></a>
<ul>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=CquHC">HC-2022</a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=CquZL">ZL_2023a</a></li>
</ul>
</li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=Pch"><i>Artocarpus altilis</i></a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=Hru"><i>Artocarpus camansi</i></a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=Har"><i>Artocarpus hirsutus</i></a></li>
<li><a href="../../cgi-bin/Artocarpus/genome.cgi?ID=Pva"><i>Artocarpus nanchuanensis</i></a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Expression</a>
<ul>
<li><a href="RNA-seq.htm">RNA-seq</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Tools</a>
<ul>
<li><a href="search.htm">Search</a></li>
<li><a href="batchsearch.htm">Batch Search</a></li>
<li><a href="sequenceserver_blast.htm">BLAST</a></li>
<li><a href="jbrowse.htm">JBrowse</a></li>
<li><a href="GO_enrichment.htm">GO enrichment</a></li>
<li><a href="KEGG_enrichment.htm">KEGG enrichment</a></li>
<li><a href="MISAweb.htm">MISAweb</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Document</a>
<ul>
<li><a href="statistics.htm">Statistics</a></li>
<li><a href="link.htm">Resources</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">Community</a>
<ul>
<li><a href="feedback.htm">Feedback</a></li>
<li><a href="download.htm">Download</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 主内容区域 -->
<tr><td align="center">
<table cellpadding="0" bordercolorlight="#C0C0C0" cellspacing="15px" bgcolor="#EEEEEE" border="0" width="1200px">
<tr><td><table class="tableborder" width="100%" cellpadding="0" cellspacing="15px" bgcolor="#F5F5F5">
<!-- 标题 -->
<tr><td align="center"><h2 align="center">RNA-seq Project Information</h2></td></tr>
<!-- 标签页导航 -->
<tr><td>
<div class="tab-container">
<div class="tab-links">
<a onclick="showTab('geneExpression')">Gene Expression</a>
<span style="color: #666;"> || </span>
<a onclick="showTab('pairwiseComparison')">Pairwise Comparison</a>
</div>
</div>
</td></tr>
<!-- Gene Expression 标签内容 -->
<tr><td>
<div id="geneExpression" class="tab-content">
<table class="tableborder" width="100%" cellpadding="0" cellspacing="20px" bgcolor="#ffffff">
<tr><td align="center"><h3 align="center">Artocarpus Expression Atlas</h3></td></tr>
<tr><td align="center">
<form id="RNAForm" name="RNAForm" method="POST" action="../../cgi-bin/Artocarpus/RNAheatmapShow.cgi" onsubmit="return validateForm();">
<table class="tableborder" width="100%" cellpadding="0" cellspacing="10px" bgcolor="#ffffff">
<tr><td>
<table cellpadding="0" cellspacing="0" bgcolor="#fff" class="tableborder2" width="100%">
<tr><td valign="center"><b>Select a reference genome</b></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="15px" bgcolor="#ffffff" border="0" width="100%">
<tr><td>
<select size="1" class="selectblast" name="RNAsp" ID="species" onchange="inputText()">
<option value="selectspecies">--Select Species--</option>
<option selected value="ArHeCHN2-2">Artocarpus heterophyllus S10</option>
</select>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
<tr><td valign="center"><b>Select a Sequence Read Archive (SRA)</b></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="15px" bgcolor="#ffffff" border="0" width="100%">
<tr><td>
<select size="1" class="selectblast" name="RNAid" id="rna" onchange="updateFormAction()">
<option selected value="selectspecies">--Select SRA--</option>
<option value="11"
data-projectid="11"
data-experiment="Health_rep1,rep2,rep3(healthy A.heterophyllus secondary stem from Hainan,China),Defic_rep1,rep2,rep3(chlorophyll-deficient A.heterophyllus secondary stem from Hainan,China)."
data-description="Transcriptomic analysis of secondary stems in healthy and chlorophyll-deficient Artocarpus heterophyllus S10 plants from Hainan, China.">Transcriptomic analysis of secondary stems in healthy and chlorophyll-deficient Artocarpus heterophyllus S10.</option>
<option value="9_1"
data-projectid="9_1"
data-experiment=""
data-description=""></option>
<option value="9_2"
data-projectid="9_2"
data-experiment=""
data-description=""></option>
<option value="9_3"
data-projectid="9_3"
data-experiment=""
data-description=""></option>
</select>
</td></tr>
</table>
</td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" bgcolor="#fff" class="tableborder2" width="100%">
<!-- <tr><td><b>Enter the list of gene IDs.</b></td></tr> -->
<tr><td><b>Enter the list of sequence IDs.</b></td></tr>
<tr><td>
<p><textarea class="textareaquery" rows="9" name="GeneID" cols="128"></textarea></p>
</td></tr>
<tr><td> </td></tr>
<tr><td><p align="left">
<font size="2"><input type="checkbox" id="obj" onchange="checkboxOnclick(this)"> Show example IDs</font>
</p></td></tr>
<tr><td> </td></tr>
</table>
</td></tr>
<tr><td><p>
<input class="button" type="submit" value="Search" name="B2">
<input class="button1" type="reset" value="Reset" name="B3">
<input type="hidden" id="hidden_projectid" name="projectid" value="11">
<input type="hidden" id="hidden_experiment" name="experiment" value="Health_rep1,rep2,rep3(healthy A.heterophyllus secondary stem from Hainan,China),Defic_rep1,rep2,rep3(chlorophyll-deficient A.heterophyllus secondary stem from Hainan,China).">
<input type="hidden" id="hidden_description" name="description" value="Transcriptomic analysis of secondary stems in healthy and chlorophyll-deficient Artocarpus heterophyllus S10 plants from Hainan, China.">
<input type="hidden" value="Artocarpus heterophyllus S10" name="RNAtype">
</p></td></tr>
</table>
</form>
</td></tr>
</table>
</div>
</td></tr>
<!-- Pairwise Comparison 标签内容 -->
<tr><td>
<div id="pairwiseComparison" class="tab-content">
<!--下一行的 20px改为10px -->
<table class="tableborder" width="100%" cellpadding="0" cellspacing="15px" bgcolor="#ffffff">
<!--下面的height由50改为20-->
<tr><td height="20" align="center"><h3 align="center">Comparative Transcriptomics Atlas</h3></td></tr>
<tr><td align="center">
<form method="POST" action="../../cgi-bin/Artocarpus/RNAdegsResults">
<table width="100%" cellpadding="0" cellspacing="15px">
<tr>
<td height="50px" width="50%" align="right" colspan="2"><b>Selected Reference Genome:</b></td>
<td colspan="2">
<select class="selectstyle" size="1" name="genome" ID="genome" style="width:400px;">
<!-- ★★★★★★ 26.2.28把下面的“selected"进行挪位 ★★★★★★ -->
<option value="">--Select Species--</option>
<option selected value="ArHeCHN2"><i>Artocarpus heterophyllus S10</i></option>
</select>
</td>
</tr>
<tr>
<td height="50px" width="50%" align="right" colspan="2"><b>Select Transcriptomic Project:</b></td>
<td colspan="2">
<select class="selectstyle" size="1" name="project" ID="project" style="width:400px;">
<option value="">--Select Project--</option>
<option selected value="P00">DEG00: Exression and DEG ananlysis of A.heterophyllus S10 secondary stem between health and deficiency. </option>
</select>
</td>
</tr>
<tr><td height="50px" colspan="4"><h3 align="center"><b><hr></b></h3></td></tr>
<tr>
<td height="30px" colspan="2" width="50%"><p align="center"><b>Sample Query</b></p></td>
<td height="30px" colspan="2"><p align="center"><b>Sample Subject</b></p></td>
</tr>
<tr>
<td align="right"><b>Sample:</b></td>
<td align="left">
<select class="selectstyle" size="1" name="organa" ID="organa" style="width:400px;">
<option selected value="sam">sampleDescription</option>
</select>
</td>
<td align="right"><b>Sample:</b></td>
<td align="left">
<select class="selectstyle" size="1" name="organb" ID="organb" style="width:400px;">
<option selected value="sam">sampleDescription</option>
</select>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td align="right" width="25%"><b>Sample location:</b></td>
<td align="left" width="25%">
<select class="selectstyle" size="1" name="valuea" ID="valuea" style="width:400px;">
<option value="HE">Healthy</option>
<option value="DE">Chlorophyll_Deficiency</option>
</select>
</td>
<td align="right" width="25%"><b>Sample location:</b></td>
<td align="left" width="25%">
<select class="selectstyle" size="1" name="valueb" ID="valueb" style="width:400px;">
<option value="HE">Healthy</option>
<option selected value="DE">Chlorophyll_Deficiency</option>
</select>
</td>
</tr>
<tr><td height="50px" colspan="4"><h3 align="center"><b><hr></b></h3></td></tr>
<tr>
<td height="50px" width="50%" align="right" colspan="2"><b>Program:</b></td>
<td colspan="2">
<select class="selectstyle" size="1" name="program" ID="program" style="width:400px;">
<option value="">--Select program--</option>
<option selected value="DESeq2">DESeq2</option>
<option value="edgeR">edgeR</option>
</select>
</td>
</tr>
<tr>
<td height="50px" width="50%" align="right" colspan="2"><b>FC cutoff:</b></td>
<td colspan="2">
<input class="selectstyle" type="text" value="1" id="fccutoff" name="fccutoff">
</td>
</tr>
<tr>
<td height="50px" width="50%" align="right" colspan="2"><b>P value cutoff:</b></td>
<td colspan="2">
<input class="selectstyle" type="text" value="0.05" id="Adpvalue" name="Adpvalue">
</td>
</tr>
<!-- <tr><td height="5px" colspan="4"><h3 align="center"><b> </b></h3></td></tr> -->
<tr>
<td height="30px" colspan="2" width="50%"><p align="right"><input class="button" type="submit" value="submit" name="submit"></p></td>
<td height="30px" colspan="2" width="50%"><p align="left"><input class="button1" type="reset" value="reset" name="reset"></p></td>
</tr>
</table>
</form>
</td></tr>
</table>
</div>
</td></tr>
</table></td></tr>
</table>
</td></tr>
<!-- 页脚 -->
<tr>
<td class="menu" style="padding: 30px;" align="center">
<table cellpadding="0" cellspacing="15px" align="center" border="0" width="1200px" height="100%">
<tr>
<td align="left">
<font color="#333333">
<b>ArtocarpusGD</b> is developed by
<a href="mailto:hisunpeng@qfnu.edu.cn">Peng Sun</a> in Qufu Normal University, Qufu, 273165, P.R. China
<br><br>
This website is compatible with
<a target="_blank" href="https://www.google.com/chrome/">Chrome</a> and
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>
</font>
</td>
<td align="right">
<img alt="logo" src="images/logo.png" width="80" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>