我正在研究一个项目，其中有一个圆盘桌，该桌子上有一些汽车的详细信息。
当我单击该表时，还有另一个Div即将出现（模态），内容为Some text in the new Modal..。
在这里而不是这样，有没有办法从表中获取MAKE值？
这是我的工作小提琴
谢谢
首先，您不能为所有表（id="tabClass"）使用相同的ID，而不是用class="tabClass"替换ID，然后致电onclick="showModal1(this)"（） this在所有表中参考当前单击表），然后单击此处查询" make class td"，然后您将其文本内容如下：
function showModal1(e) {
var make = e.querySelector('.make').textContent;
modal1.querySelector('p').innerHTML = 'Make : '+make;
modal1.style.display = "block";
}
请参阅此小提琴
或下图：
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByTagName("table");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "";
}
// Get the modal
var modal = document.getElementById('myModal');
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("chat");
var btn1 = document.getElementsByTagName("tabClass");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
if(btn)
btn.onclick = function() {
modal.style.display = "block";
}
function showModal1(e) {
var make = e.querySelector('.make').textContent;
console.log(e.querySelector('.make').innerHTML);
modal1.querySelector('p').innerHTML = 'Make : '+make;
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
if(span)
span.onclick = function() {
modal.style.display = "none";
}
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal1) {
modal1.style.display = "none";
}
}#chat,
#chat:after,
.chatbox {
transition: all .4s ease-in-out
}
#chat,
#close-chat,
.minim-button,
.maxi-button,
.chat-text {
font-weight: 700;
cursor: pointer;
font-family: Arial, sans-serif;
text-align: center;
height: 20px;
line-height: 20px
}
#chat,
#close-chat,
.chat-text {
font-weight: 700;
cursor: pointer;
font-family: Arial, sans-serif;
text-align: center;
height: 20px;
line-height: 20px
}
#chat,
#close-chat,
.chatbox {
border: 1px solid #A8A8A8
}
#chat:after,
#chat:before {
position: absolute;
border-style: solid;
content: ""
}
.chatbox {
position: fixed;
width: 65%;
height: 85%;
bottom: 0.5%;
right: 1%;
margin: 0 0 -1500px;
background: white;
}
#close-chat {
position: absolute;
top: 2px;
right: 10px;
font-size: 24px;
border: 1px solid #dedede;
width: 20px;
z-index: 2
}
#minim-chat,
#maxi-chat {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
line-height: 20px;
cursor: pointer;
z-index: 1
}
.minim-button {
position: absolute;
top: 2px;
right: 32px;
font-size: 24px;
border: 1px solid #dedede;
width: 20px;
}
.maxi-button {
position: absolute;
top: 2px;
right: 32px;
font-size: 24px;
border: 1px solid #dedede;
width: 20px;
background: #fefefe;
}
.chat-text {
position: absolute;
top: 5px;
left: 140px;
font-size: 16px;
}
#chat {
width: 40px;
position: relative;
border-radius: 3px;
padding: 2px 8px;
font-size: 12px;
background: #fff;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
#chat:before {
border-width: 10px 11px 0 0;
border-color: #A8A8A8 transparent transparent;
left: 7px;
bottom: -10px
}
#chat:after {
border-width: 9px 8px 0 0;
border-color: #fff transparent transparent;
left: 8px;
bottom: -8px
}
#chat:hover {
background: #ddd;
-webkit-animation-name: hvr-pulse-grow;
animation-name: hvr-pulse-grow;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
#chat:hover:after {
border-color: #ddd transparent transparent!important
}
.animated-chat {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1)
}
10%,
20% {
-webkit-transform: scale(.9)rotate(-3deg)
}
30%,
50%,
70%,
90% {
-webkit-transform: scale(1.1)rotate(3deg)
}
40%,
60%,
80% {
-webkit-transform: scale(1.1)rotate(-3deg)
}
100% {
-webkit-transform: scale(1)rotate(0)
}
}
@keyframes tada {
0% {
transform: scale(1)
}
10%,
20% {
transform: scale(.9)rotate(-3deg)
}
30%,
50%,
70%,
90% {
transform: scale(1.1)rotate(3deg)
}
40%,
60%,
80% {
transform: scale(1.1)rotate(-3deg)
}
100% {
transform: scale(1)rotate(0)
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada
}
@-webkit-keyframes hvr-pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
}
@keyframes hvr-pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
}
.chat-form {
position: absolute;
/* bottom: 0px; */
bottom: 0;
/* margin-top: 4%; */
display: flex;
align-items: flex-start;
width: 100%;
}
* {
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li {
max-width: 80%;
word-break: break-all;
display: inline-block;
position: relative;
clear: both;
padding: 4%;
color: white;
background-color: #00819E;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
/* max-width: calc(100% - 20px); */
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
margin-bottom: 5%;
margin-left: 5%;
}
.lexResponse:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 21px solid transparent;
border-right-color: #00819E;
border-left: 0;
border-bottom: 0;
margin-top: -10.5px;
margin-left: -21px;
}
.me:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 21px solid transparent;
border-left-color: lightskyblue;
border-right: 0;
border-bottom: 0;
margin-top: -10.5px;
margin-right: -21px;
}
.me {
float: right;
background: lightskyblue;
color: black;
margin-right: 8px;
width: 50%;
margin-right: 6%;
}
.typewriter h1 {
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid orange;
/* The typwriter cursor */
white-space: nowrap;
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
.chat-text {
text-align: center;
}
#textinput {
padding: 2%;
font-size: 1em;
width: 95%;
}
.backgroundColor {
padding: 2%;
font-size: 1em;
width: 100%;
background: lightgray;
}
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 176, 240, 0.7);
z-index: 999;
}
.chatHeader {
position: absolute;
/* position: relative; */
top: 0px;
background-color: #101010;
color: white;
width: 100%;
border: 1px solid black;
height: 9%;
}
.chatBody {
margin-top: 13%;
overflow-y: auto;
overflow: auto;
height: 70%;
/* margin-bottom: 50px; */
}
.col2,
.col1 {
width: 50%;
text-align: center
}
.w3-display-right {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
transform: translate(0%, -50%);
}
.w3-display-left {
cursor: pointer;
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
}
table {
border: 0px;
}
table td {
color: black;
}
.make {
text-transform: uppercase;
}
.x {
background: -webkit-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%);
background: -o-linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%);
background: linear-gradient(90deg, #50C9C3 10%, #96DEDA 90%);
}
td.col2 {
text-transform: capitalize;
}
td.col1 {
text-transform: lowercase;
font-variant: small-caps
}
/* The Modal (background) */
.modal,
.modal1 {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content1 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
-webkit-animation: animatezoom 0.6s;
-webkit-animation-duration: 0.4s;
animation: animatezoom 0.6s;
animation-duration: 0.4s
}
/* The Close Button */
.close,
.close1 {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus,
.close1:hover,
.close1:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* .w3-animate-zoom {
animation: animatezoom 0.6s
} */
@keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}<div id="myModal" class="modal" style="display: block;">
<div class="modal-content">
<!-- <span class="close">×</span> -->
<div class="chatbox" id="chatbox" style="margin: 0px;">
<div>Based on your requirements here are the top 10 cars that I can recommend you
<br>
<br>
<div class="x" id="x">
<table class="tabClass" onclick="showModal1(this)" style="width: 100%; border: 1px solid black;">
<tbody>
<tr>
<td class="col1">Make</td>
<td class="col2 make">volkswagen</td>
</tr>
<tr>
<td class="col1">Model</td>
<td class="col2">tiguan</td>
</tr>
<tr>
<td class="col1">Vehicle Size</td>
<td class="col2">compact</td>
</tr>
<tr>
<td class="col1">Doors</td>
<td class="col2">4</td>
</tr>
<tr>
<td class="col1">Hp</td>
<td class="col2">200</td>
</tr>
<tr>
<td class="col1">Price</td>
<td class="col2">34445</td>
</tr>
</tbody>
</table>
<table class="tabClass" onclick="showModal1(this)" style="width: 100%; border: 1px solid black; display: none;">
<tbody>
<tr>
<td class="col1">Make</td>
<td class="col2 make">mitsubishi</td>
</tr>
<tr>
<td class="col1">Model</td>
<td class="col2">outlander sport</td>
</tr>
<tr>
<td class="col1">Vehicle Size</td>
<td class="col2">compact</td>
</tr>
<tr>
<td class="col1">Doors</td>
<td class="col2">4</td>
</tr>
<tr>
<td class="col1">Hp</td>
<td class="col2">168</td>
</tr>
<tr>
<td class="col1">Price</td>
<td class="col2">25995</td>
</tr>
</tbody>
</table>
<table class="tabClass" onclick="showModal1(this)" style="width: 100%; border: 1px solid black; display: none;">
<tbody>
<tr>
<td class="col1">Make</td>
<td class="col2 make">buick</td>
</tr>
<tr>
<td class="col1">Model</td>
<td class="col2">encore</td>
</tr>
<tr>
<td class="col1">Vehicle Size</td>
<td class="col2">compact</td>
</tr>
<tr>
<td class="col1">Doors</td>
<td class="col2">4</td>
</tr>
<tr>
<td class="col1">Hp</td>
<td class="col2">138</td>
</tr>
<tr>
<td class="col1">Price</td>
<td class="col2">31285</td>
</tr>
</tbody>
</table>
</div>
<span class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮❮</span>
<span class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯❯</span>
<br>Would you want to know your nearby Car dealers?</div>
</div>
</div>
</div>
<div id="myModal1" class="modal1">
<!-- Modal content -->
<div class="modal-content1">
<span class="close1">×</span>
<p>Some text in the new Modal..</p>
</div>
</div>