Assuming I have a table like below:
The table is generated using PHP. The update button should launch one of two interfaces depending on the Report type. The problem I have is getting each Update button to correspond to the Report type in its particular row only. I have tried this with the following code :
<table id="reportTbl" border="1" style="width:100%">
<tr>
<th>Report</th>
<th>Data</th>
<th>Update</th>
</tr>
<tr>
<td>Encrypted</td>
<td>Image</td>
<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
</tr>
<tr>
<td>Unencrypted</td>
<td>Document</td>
<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
</tr>
</table>
function runPop() {
var pop = new myPop();
var cells = document.getElementById('reportTbl').getElementsByTagName('td');
for (i = 0; i < cells.length;) {
var report = document.getElementById('reportTbl').getElementsByTagName('td')[i].innerHTML;
pop.popOut(report);
console.log(report);
i += 3;
}
}
myPopout()
represents the class which handles the two interfaces it does this by checking the Report type.
The problem with the code above is when I click the button both interfaces are opened one on top of each other which must be due to the loop. How would I fix this?
Assuming I have a table like below:
The table is generated using PHP. The update button should launch one of two interfaces depending on the Report type. The problem I have is getting each Update button to correspond to the Report type in its particular row only. I have tried this with the following code :
<table id="reportTbl" border="1" style="width:100%">
<tr>
<th>Report</th>
<th>Data</th>
<th>Update</th>
</tr>
<tr>
<td>Encrypted</td>
<td>Image</td>
<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
</tr>
<tr>
<td>Unencrypted</td>
<td>Document</td>
<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
</tr>
</table>
function runPop() {
var pop = new myPop();
var cells = document.getElementById('reportTbl').getElementsByTagName('td');
for (i = 0; i < cells.length;) {
var report = document.getElementById('reportTbl').getElementsByTagName('td')[i].innerHTML;
pop.popOut(report);
console.log(report);
i += 3;
}
}
myPopout()
represents the class which handles the two interfaces it does this by checking the Report type.
The problem with the code above is when I click the button both interfaces are opened one on top of each other which must be due to the loop. How would I fix this?
Share Improve this question edited Sep 3, 2015 at 13:42 b0w3rb0w3r asked Sep 3, 2015 at 13:38 b0w3rb0w3rb0w3rb0w3r 9373 gold badges12 silver badges33 bronze badges 1-
1
Can you update the HTML that is generated by chance? (To include a
data-*
attribute)? – tymeJV Commented Sep 3, 2015 at 13:40
2 Answers
Reset to default 4You need to pass the clicked button reference to runPop
then use that to get the reference to the tr
element and using that you can you can get the first tr
<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop(this);"></td>
then
function runPop(el) {
var report = el.parentNode.parentNode.cells[0].innerHTML;
var pop = new myPop();
pop.popOut(report);
console.log(report);
}
You should not put javascript in your HTML, and you should use delegate events:
HTML:
<table id="myTable">
<tr>
<td>Cell #1 Row #1</td>
<td><input type="submit" class="tbl_Update" value="Update" /></td>
</tr>
<tr>
<td>Cell #1 Row #2</td>
<td><input type="submit" class="tbl_Update" value="Update" /></td>
</tr>
</table>
JavaScript:
var myTable = document.getElementById('myTable');
myTable.addEventListener('click', function (e) {
var button = e.target;
var cell = button.parentNode;
var row = cell.parentNode;
var rowFirstCellText = row.querySelector('td').innerHTML;
console.log(button);
console.log(cell);
console.log(row);
console.log(rowFirstCellText);
}, false);
Live example here : http://jsfiddle/ueg19uv4/