我在模态框内有一个 table,上面有一个按钮,单击该按钮时,它会调用一个将数据保存到 sessionStorage 的函数
I have a table inside a modal with a button on it, on the click on of that button, it calls a function which saves the data to sessionStorage
<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body m-3">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Type of Claim</td>
<td id="TypeofClaim" >Data</td>
</tr>
<tr>
<td>Investigation Type</td>
<td id="InvestigationType" >Data</td>
</tr>
<tr>
<td>Customer ID</td>
<td id="CustomerID" >Data</td>
</tr>
<tr>
<td>Name of LA</td>
<td id="NameofLA" >Data</td>
</tr>
<tr>
<td>Date of Birth of LA</td>
<td id="DateofBirthofLA" >Data</td>
</tr>
<tr>
<td>Age at Entry</td>
<td id="AgeatEntry" >Data</td>
</tr>
<tr>
<td>Date of Commencement</td>
<td id="DOC" >Data</td>
</tr>
<tr>
<td>Occupation of LA</td>
<td id="OccupationofLA" >Data</td>
</tr>
</tbody>
</table>
<a href="#">
<button id="StartInvestigationButton" type="button" onclick="startInvestigation()" class="btn btn-primary float-right">Start Investigation</button></a>
</div>
</div>
</div>
</div>
<!--end Modal -->
函数如下:
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").value;
caseDetails[1] = document.getElementById("InvestigationType").value;
caseDetails[2] = document.getElementById("CustomerID").value;
caseDetails[3] = document.getElementById("NameofLA").value;
caseDetails[4] = document.getElementById("DateofBirthofLA").value;
caseDetails[5] = document.getElementById("AgeatEntry").value;
caseDetails[6] = document.getElementById("DOC").value;
caseDetails[7] = document.getElementById("OccupationofLA").value;
console.log(caseDetails);
}
控制台日志:
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
注:
我已经使用 table 完成了此操作,但现在 table 位于模态中,我不知道该怎么做。
可能是因为 table 在模态内部,td 的值无法检索并显示为未定义。
TD
没有 value
(大多数 html 元素没有)
您要找的是textContent
caseDetails[0] = document.getElementById("TypeofClaim").textContent;
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").innerText;
caseDetails[1] = document.getElementById("InvestigationType").innerText;
caseDetails[2] = document.getElementById("CustomerID").innerText;
caseDetails[3] = document.getElementById("NameofLA").innerText;
caseDetails[4] = document.getElementById("DateofBirthofLA").innerText;
caseDetails[5] = document.getElementById("AgeatEntry").innerText;
caseDetails[6] = document.getElementById("DOC").innerText;
caseDetails[7] = document.getElementById("OccupationofLA").innerText;
console.log(caseDetails);
}
<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body m-3">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Type of Claim</td>
<td id="TypeofClaim" >Data</td>
</tr>
<tr>
<td>Investigation Type</td>
<td id="InvestigationType" >Data</td>
</tr>
<tr>
<td>Customer ID</td>
<td id="CustomerID" >Data</td>
</tr>
<tr>
<td>Name of LA</td>
<td id="NameofLA" >Data</td>
</tr>
<tr>
<td>Date of Birth of LA</td>
<td id="DateofBirthofLA" >Data</td>
</tr>
<tr>
<td>Age at Entry</td>
<td id="AgeatEntry" >Data</td>
</tr>
<tr>
<td>Date of Commencement</td>
<td id="DOC" >Data</td>
</tr>
<tr>
<td>Occupation of LA</td>
<td id="OccupationofLA" >Data</td>
</tr>
</tbody>
</table>
<a href="#">
<button id="StartInvestigationButton" type="button" onclick="startInvestigation()" class="btn btn-primary float-right">Start Investigation</button></a>
</div>
</div>
</div>
</div>
<!--end Modal -->
函数如下:
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").value;
caseDetails[1] = document.getElementById("InvestigationType").value;
caseDetails[2] = document.getElementById("CustomerID").value;
caseDetails[3] = document.getElementById("NameofLA").value;
caseDetails[4] = document.getElementById("DateofBirthofLA").value;
caseDetails[5] = document.getElementById("AgeatEntry").value;
caseDetails[6] = document.getElementById("DOC").value;
caseDetails[7] = document.getElementById("OccupationofLA").value;
console.log(caseDetails);
}
控制台日志:
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
注:
我已经使用 table 完成了此操作,但现在 table 位于模态中,我不知道该怎么做。
可能是因为 table 在模态内部,td 的值无法检索并显示为未定义。
TD
没有 value
(大多数 html 元素没有)
您要找的是textContent
caseDetails[0] = document.getElementById("TypeofClaim").textContent;
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").innerText;
caseDetails[1] = document.getElementById("InvestigationType").innerText;
caseDetails[2] = document.getElementById("CustomerID").innerText;
caseDetails[3] = document.getElementById("NameofLA").innerText;
caseDetails[4] = document.getElementById("DateofBirthofLA").innerText;
caseDetails[5] = document.getElementById("AgeatEntry").innerText;
caseDetails[6] = document.getElementById("DOC").innerText;
caseDetails[7] = document.getElementById("OccupationofLA").innerText;
console.log(caseDetails);
}