1. 首頁
  2. 問答
  3. 通過ID獲取div值

通過ID獲取div值

2017-05-16 248 views
-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

+8

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

+4

問題是因爲你有多個具有相同'id'的元素。這是無效的HTML。 –

+0

基本上divTableRow由Web服務響應填充，所以我不能改變每一行的id –

回答

0

不要使用同一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

+0

完美，謝謝！ –

0

首先，你不能有一個頁面上同一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

+0

有'getElementsByClassName'' – Jamiec

+0

這樣的事情是的，但我們只想獲取單擊元素的子元素。 –

+0

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

0

當你添加標籤的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

0

嘗試使用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

+0

你仍然不應該有多個ID。您可以輕鬆製作一個使用類名稱的jQuery解決方案。 – Jamiec

+0

@Jamiec這就是爲什麼我引用OPs關於從具有該多個虛假ID的Web服務獲取數據的句子。 – SVSchmidt

相關問題

 相關問題