Question

我是JavaScript新手，我试图在JavaScript中点击div的值。这是我的代码：

HTML

<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey();">
      <div class="divTableCell1" id="departure_time">1200</div> 
      <div class="divTableCell1" id="arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey();">
      <div class="divTableCell1" id="departure_time">8888</div> 
      <div class="divTableCell1" id="arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

CSS

    .divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

的JavaScript

function hey() {
  alert("sdsdsd");
  var departure = document.getElementById("departure_time").innerHTML;
  alert(departure);
  var arrival = document.getElementById("arrival_time").innerHTML;
  alert(arrival);
}

基本上，它是一个用DIV标签创建的表，这里显示的数据来自Web服务响应。当我点击任何 divTableRow 时，它只给我第一行的结果，但我想要的是如果用户点击第二行，它应该提醒第二行数据。

这是JSFiddle的link

Answer 1

首先，您不能在页面上拥有多个具有相同ID的元素。将 departure_time 和 arrival_time 更改为班级。

然后你可以为你的活动添加一个参数，如下所示：

<div class="divTableRow" onclick="hey(this);">

此关键字是触发此事件的HTML元素。在您的JavaScript中，您可以这样使用它：

function hey(element) {
    var departure = element.getElementsByClassName("departure_time")[0].innerText;
    var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
    alert(departure);
    alert(arrival);
}

整个片段可能如下所示：

function hey(element) {
    var departure = element.getElementsByClassName("departure_time")[0].innerText;
    var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
    alert(departure);
    alert(arrival);
}

.divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">1200</div> 
      <div class="divTableCell1 arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">8888</div> 
      <div class="divTableCell1 arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

Answer 2

当您添加标记jQuery时，您可以使用以下代码段来解决您的问题：

$("div.divTableRow").click(function(){
  var departure = $(this).find("#departure_time").text();
  alert(departure);
  var arrival = $(this).find("#arrival_time").text(); 
  alert(arrival);
});

<强> DEMO

Answer 3

尝试使用jQuerys单击处理程序，以便您可以在单击处理程序中引用单击的元素。我们的想法是限制范围（“#departure_time WITHIN在单击的行中”）。当然，只要“由Web服务响应填充”为真，答案就是有效的。通常，您可以使用

类

https://api.jquery.com/click/

$('.divTableRow').click(hey);

function hey (evt) {
  alert("sdsdsd");
  var departure = $(this).find('#departure_time').text();
  alert(departure);
  var arrival = $(this).find('#arrival_time').text();
  alert(arrival);
}

.divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell1" id="departure_time">1200</div> 
      <div class="divTableCell1" id="arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell1" id="departure_time">8888</div> 
      <div class="divTableCell1" id="arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

Answer 4

多次使用相同的ID，将其更改为类。此后，如果您想使用vanilla javascript执行此操作，请使用对方法调用hey中的行的引用并使用getElementsByClassName：

window.hey = function(div){
  var departure = div.getElementsByClassName("departure_time")[0].innerHTML;
  alert(departure);
  var arrival = div.getElementsByClassName("arrival_time")[0].innerHTML;
  alert(arrival);  
};

.divTable{
  display: table;
  width: 100%;
  margin-top:20px;
}
.divTableRow {
  display: table-row;
  text-align: -webkit-center;
}
.divTableHeading {
  background-color: rgba(0, 102, 179, 0.6) !important;
  color: #fff;
  display: table-header-group;
  white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
  display: table-cell;
  padding: 3px 10px;
  width:30%;
  white-space: nowrap;
}
.divTableCell1, .divTableHead {
  border: 1px solid #e3e3e3;
  display: table-cell;
  padding: 3px 10px;
  white-space: nowrap;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableHeading">
	  <div class="divTableRow">
		  <div class="divTableCell" >DEPARTURE TIME</div>
			<div class="divTableCell">ARRIVAL TIME</div>
			<div class="divTableCell">FARE</div>
			<div class="divTableCell">BUS TYPE</div>
			<div class="divTableCell">AVAILABLE SEATS</div>
			<div class="divTableCell">STATUS</div>
		</div>
	</div>
	<div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">1200</div> 
      <div class="divTableCell1 arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey(this)">
      <div class="divTableCell1 departure_time">8888</div> 
      <div class="divTableCell1 arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
	</div>
</div>

按ID获取div值

4 个答案: