通过ID获取div值

-1

我是JavaScript新手，我试图在JavaScript中获得div的值。这里是我的代码：通过ID获取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它只给我第一行的结果，但我想要的是，如果用户点击第二行，它应该警告第二行数据。

这里是link到的jsfiddle

来源

2017-05-16 Noob Player

不要使用多个元素相同的ID，使用class insted –

问题是因为你有多个具有相同'id'的元素。这是无效的HTML。 –

基本上divTableRow由Web服务响应填充，所以我不能改变每一行的id –

不要使用同一ID多次，THM改为类。此后，如果你想与香草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"> 
 
\t <div class="divTableRow"> 
 
\t \t <div class="divTableCell" >DEPARTURE TIME</div> 
 
\t \t \t <div class="divTableCell">ARRIVAL TIME</div> 
 
\t \t \t <div class="divTableCell">FARE</div> 
 
\t \t \t <div class="divTableCell">BUS TYPE</div> 
 
\t \t \t <div class="divTableCell">AVAILABLE SEATS</div> 
 
\t \t \t <div class="divTableCell">STATUS</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <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> 
 
\t </div> 
 
</div>

来源

2017-05-16 07:58:05 Jamiec

完美，谢谢！ –

首先，你不能有一个页面上同一ID的多个元素。更改departure_time和arrival_time to classes。

然后你可以将参数添加到您的事件，像这样：

<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>

来源

2017-05-16 07:54:02

有'getElementsByClassName'' – Jamiec

这样的事情是的，但我们只想获取单击元素的子元素。 –

但是你的方法中有点击元素。 'element.getElementsByClassName' – Jamiec

当你添加标签的jQuery，你可以使用下面的代码来解决你的问题：

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

DEMO

来源

2017-05-16 07:55:18 Unknown

尝试使用jQuerys单击处理程序，让您可以点击处理程序内引用点击的元素。这个想法是限制范围（“#departure_time WITHIN点击行”）。当然，答案只有在“充满网络服务响应”的情况下才有效。通常情况下，你可以使用类

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>

来源

2017-05-16 07:57:30 SVSchmidt

你仍然不应该有多个ID。您可以轻松制作一个使用类名称的jQuery解决方案。 – Jamiec

@Jamiec这就是为什么我引用OPs关于从具有该多个虚假ID的Web服务获取数据的句子。 – SVSchmidt

通过ID获取div值

回答

相关问题