Javascript 如何打开表内的表 函数切换（）{ if（document.getElementById（“hidethis”）.style.display=='none'）{ document.getElementById（“hidethis”）.style.display=''； }否则{ document.getElementById（“hidethis”）.style.display='none'； } } 函数insertTable（） { 调试器； if（document.getElementById（“hidethis”）.style.display==“无”）{ document.getElementById（“hidethis”）.style.display=''； 警惕（“是”）； //var num_rows=document.getElementById（'rows'）.value； //var num_cols=document.getElementById（'cols'）.value； //var width=document.getElementById（'width'）。值； var num_rows=2； var num_cols=2； var宽度=10； var theader=“”； var tbody=“”； 对于（var j=0；j
我已经创建了这种类型的表格，但我的要求是，如果我要单击第一行，然后在第一行下方打开表格，如果我要单击第二行，然后在第二行下方打开相同的表格。签出。。只需在代码中应用几个逻辑Javascript 如何打开表内的表 函数切换（）{ if（document.getElementById（“hidethis”）.style.display=='none'）{ document.getElementById（“hidethis”）.style.display=''； }否则{ document.getElementById（“hidethis”）.style.display='none'； } } 函数insertTable（） { 调试器； if（document.getElementById（“hidethis”）.style.display==“无”）{ document.getElementById（“hidethis”）.style.display=''； 警惕（“是”）； //var num_rows=document.getElementById（'rows'）.value； //var num_cols=document.getElementById（'cols'）.value； //var width=document.getElementById（'width'）。值； var num_rows=2； var num_cols=2； var宽度=10； var theader=“”； var tbody=“”； 对于（var j=0；j,javascript,html-table,Javascript,Html Table,我已经创建了这种类型的表格，但我的要求是，如果我要单击第一行，然后在第一行下方打开表格，如果我要单击第二行，然后在第二行下方打开相同的表格。签出。。只需在代码中应用几个逻辑 <html class="no-js" lang="en"> <head> <script> function toggle() { if( document.getElementById("hidethis").style.display=='none'
<html class="no-js" lang="en">
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<script type="text/javascript">
function insertTable()
{
debugger;
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = '';
alert("yes");
//var num_rows = document.getElementById('rows').value;
//var num_cols = document.getElementById('cols').value;
//var width = document.getElementById('width').value;
var num_rows = 2;
var num_cols = 2;
var width = 10;
var theader = "<table id='table1' width = ' " + width + "% '>";
var tbody = "";
for (var j = 0; j < num_cols; j++) {
theader += "<th>header col " + (j + 1) + " </th>";
}
for (var i = 0; i < num_rows; i++) {
tbody += "<tr>";
for (var j = 0; j < num_cols; j++) {
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
else {
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<style>
#table1 {
border: solid 1px;
border-collapse: collapse;
}
#table1 th {
border: solid 1px;
border-collapse: collapse;
}
#table1 td {
border: solid 1px;
vertical-align: middle;
}
</style>
</head>
<body>.
<div>
<table id="tableID" border="1" height="50" width="100">
<tr onclick="insertTable();">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>
<table>
<tr id="hidethis">
<td id="wrapper"></td>
</tr>
</table>
</td>
</tr>
<!--<tr>
<td>
<table id="table" border="1" height="50" width="100">
<tr id="hidethis">
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</table>
</td>
</tr>-->
<tr onclick="insertTable();">
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
<!--<div id="wrapper"></div>-->
</div>
</body>
</html>
<html class="no-js" lang="en">
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<script type="text/javascript">
function insertTable()
{
debugger;
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = '';
alert("yes");
//var num_rows = document.getElementById('rows').value;
//var num_cols = document.getElementById('cols').value;
//var width = document.getElementById('width').value;
var num_rows = 2;
var num_cols = 2;
var width = 10;
var theader = "<table id='table1' width = ' " + width + "% '>";
var tbody = "";
for (var j = 0; j < num_cols; j++) {
theader += "<th>header col " + (j + 1) + " </th>";
}
for (var i = 0; i < num_rows; i++) {
tbody += "<tr>";
for (var j = 0; j < num_cols; j++) {
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
else {
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<style>
#table1 {
border: solid 1px;
border-collapse: collapse;
}
#table1 th {
border: solid 1px;
border-collapse: collapse;
}
#table1 td {
border: solid 1px;
vertical-align: middle;
}
</style>
</head>
<body>.
<div>
<table id="tableID" border="1" height="50" width="100">
<tr onclick="insertTable();">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>
<table>
<tr id="hidethis">
<td id="wrapper"></td>
</tr>
</table>
</td>
</tr>
<!--<tr>
<td>
<table id="table" border="1" height="50" width="100">
<tr id="hidethis">
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</table>
</td>
</tr>-->
<tr onclick="insertTable();">
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
<!--<div id="wrapper"></div>-->
</div>
</body>
</html>
函数切换（）{
if（document.getElementById（“hidethis”）.style.display==“无”）{
document.getElementById（“hidethis”）.style.display=''；
}否则{
document.getElementById（“hidethis”）.style.display='none'；
}
}
函数插入表_1（）{
控制台日志（tempp）；
调试器；
if（document.getElementById（“hidethis”）.style.display==“无”）{
<html class="no-js" lang="en">
<head>
<script>
function toggle() {
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = '';
} else {
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<script type="text/javascript">
function insertTable_1() {
console.log(tempp);
debugger;
if (document.getElementById("hidethis").style.display == 'none') {
document.getElementById("hidethis").style.display = '';
//var num_rows = document.getElementById('rows').value;
//var num_cols = document.getElementById('cols').value;
//var width = document.getElementById('width').value;
var num_rows = 2;
var num_cols = 2;
var width = 10;
var theader = "<table id='table1' width = ' " + width + "% '>";
var tbody = "";
for (var j = 0; j < num_cols; j++) {
theader += "<th>header col " + (j + 1) + " </th>";
for (var i = 0; i < num_rows; i++) {
tbody += "<tr>";
for (var j = 0; j < num_cols; j++) {
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById("wrapper").innerHTML = theader + tbody + tfooter;
document.getElementById("hidethis_2").style.display = 'none';
}
else
{
document.getElementById("hidethis").style.display = 'none';
document.getElementById("hidethis_2").style.display = 'none';
}
}
function insertTable_2() {
if (document.getElementById("hidethis_2").style.display == 'none') {
document.getElementById("hidethis_2").style.display = '';
//var num_rows = document.getElementById('rows').value;
//var num_cols = document.getElementById('cols').value;
//var width = document.getElementById('width').value;
var num_rows = 2;
var num_cols = 2;
var width = 10;
var theader = "<table id='table1' width = ' " + width + "% '>";
var tbody = "";
for (var j = 0; j < num_cols; j++) {
theader += "<th>header col " + (j + 1) + " </th>";
}
for (var i = 0; i < num_rows; i++) {
tbody += "<tr>";
for (var j = 0; j < num_cols; j++) {
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
}
document.getElementById("wrapper_second").innerHTML = theader + tbody + tfooter;
document.getElementById("hidethis").style.display = 'none';
}
else
{
document.getElementById("hidethis_2").style.display = 'none';
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
<style>
#table1 {
border: solid 1px;
border-collapse: collapse;
}
#table1 th {
border: solid 1px;
border-collapse: collapse;
}
#table1 td {
border: solid 1px;
vertical-align: middle;
}
</style>
</head>
<body>.
<div>
<table id="tableID" border="1" height="50" width="100">
<tr onclick="insertTable_1();">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>
<table>
<tr id="hidethis">
<td id="wrapper"></td>
</tr>
</table>
</td>
</tr>
<!--<tr>
<td>
<table id="table" border="1" height="50" width="100">
<tr id="hidethis">
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
</table>
</td>
</tr>-->
<tr onclick="insertTable_2();">
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>
<table>
<tr id="hidethis_2">
<td id="wrapper_second"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--<div id="wrapper"></div>-->
</div>
</body>
</html>