I have the following HTML table format (just showing one row out of many) which has a button on the last cell:
<div id=main>
<div class='info'>
<p>Name: <span class='x'>ABC</span></p>
<p>Number: <span class='x'>0</span></p>
<table class='newTable'>
<tr>
<th>
Number
</th>
<th>
Value
</th>
<th>
Go
</th>
</tr>
<tr>
<td>
0
</td>
<td>
<span class='k'>11.7</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
</table>
</div>
</div>
I have an eventListener (mainEntries.addEventListener('click', clickFunction)) which triggers whenever inside <div id = main> ... </div>
I am not allowed to change the HTML. I have two questions:
How do I check inside function clickFunction(e) if I clicked on the button "GO" or somewhere inside <div id = main> ... </div>
***inside clickFunction(e) e is the MouseEvent
If I click on the button how can I get the text inside first cell of the same row?
As already was mentioned, you can use e.target to get clicked element. Then, you can use combination of closest() and cells.item() functions of the found button:
const mainEntries = document.querySelector('#main');
const clickFunction = e => {
if (e.target.tagName === 'BUTTON' && e.target.classList.contains('go')) {
const firstCellSameRow = e.target.closest('tr').cells.item(0).innerText;
console.log('GO button clicked. First cell\'s text at the same row is ', firstCellSameRow);
}
else {
console.log('Main div clicked outside of GO button');
}
}
mainEntries.addEventListener('click', clickFunction);
<div id=main>
<div class='info'>
<p>Name: <span class='x'>ABC</span></p>
<p>Number: <span class='x'>0</span></p>
<table class='newTable'>
<tr>
<th>
Number
</th>
<th>
Value
</th>
<th>
Go
</th>
</tr>
<tr>
<td>
0
</td>
<td>
<span class='k'>11.7</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<span class='k'>8.5</span>
</td>
<td>
<button class='go'>Go</button>
</td>
</tr>
</table>
</div>
</div>
I added another distinct row for showing different logs.
1) you should consider e.target inside function clickFunction(e)
2) you should select the grandparent of that button, then, from the parent, you select the first child. buttonElement.parentNode.parentNode.children[0].innerText
Related
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
I want to check if the current grid cell is the last visible cell in the row.
//accurately confirms if cell is the last cell in the row, assuming there are no "display: none" cells after it
var isLastColumn = $(e.target).closest('td').is(':last-child');
//doesn't work - obviously because last-child gets the cell regardless of visiility
var isLastColumn = $(e.target).closest('td').is(':visible:last-child');
//doesn't work
var isLastColumn = $(e.target).closest('td').is('td.visible:last-of-type');
//doesn't work
var isLastColumn = $(e.target).closest('td').is(':visible:last');
How can I check to see if the selected cell is the last visible column of the row?
I am hooking to the event with the following:
var grid = $("##gridName").data("kendoGrid");
grid.tbody.on('keydown', onGridKeydown)
function onGridKeydown(e)
{
var isLastColumn = $(e.target).closest('td').is(':last-child');
}
There is most likely a way more efficient way of doing it then below but it seems to work and can tell you if you are in the last visible column of the current row.
Taking into account you mentioned display:none was used to hide other columns you should be able to check if the current td in the current row is the last visible td elements.
$('button').on('click', function(e) {
var $td = $(e.target).closest('td');
var isLastColumn = $td.is($td.closest('tr').find('td:visible:last'));
alert(isLastColumn)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<button>
1
</button>
</td>
<td style="display:none">
<button>
2
</button>
</td>
<td>
<button>
3
</button>
</td>
<td style="display:none">
<button>
4
</button>
</td>
</tr>
<tr>
<td>
<button>
1
</button>
</td>
<td style="display:none">
<button>
2
</button>
</td>
<td>
<button>
3
</button>
</td>
<td style="display:none">
<button>
4
</button>
</td>
</tr>
</table>
<table id="table2">
<tr>
<td>
<button>
1
</button>
</td>
<td style="display:none">
<button>
2
</button>
</td>
<td>
<button>
3
</button>
</td>
<td style="display:none">
<button>
4
</button>
</td>
</tr>
</table>
Here is a Fiddle as well
<table cellspacing="0" width="80%">
<thead>
<tr>
<th>
Date
</th>
<th>
Invoice amount
</th>
<th>
Interest rate
</th>
<th>
Interest amount
</th>
<th>
Amortization
</th>
<th>
Capital balance
</th>
</tr>
</thead>
#foreach (var item in Model) {
<tr>
<td align="center">
#Html.DisplayFor(modelItem => item.Date)
</td>
<td align="center">
<div contenteditable class="editor">
#Html.DisplayFor(modelItem => item.InvoiceAmount)
</div>
</td>
<td align="center">
<div contenteditable class="editor">
#Html.DisplayFor(modelItem => item.InterestRate)
</div>
</td>
<td align="center">
<div contenteditable class="editor">
#Html.DisplayFor(modelItem => item.InterestAmount)
</div>
</td>
<td align="center">
<div contenteditable class="editor">
#Html.DisplayFor(modelItem => item.Amortization)
</div>
</td>
<td align="center">
<div contenteditable class="editor">
#Html.DisplayFor(modelItem => item.PresentValue)
</div>
</td>
</tr>
}
In the previous view you add numbers into textboxes and click on a button to calculate which brings you to this table. The calculation method is in my CalculationController. I want this table to be like in excel, the rows should be dependent of each other.
For example, when I edit the "interest rate" I just need to update that row and the rows beneath. Not those in the past. Its meant to be an annuity calculation.
Thankful for any help.
Javascript (possibly using a library like jQuery) would make this pretty easy. For example, the following makes a calculation based on the Invoice Amount cell (assuming you've given it an ID of InvoiceAmount). It does so as someone types into that cell. Then it updates the value of another element with the result:
$("#InvoiceAmount").bind('keyup keydown keypress',function()
{
// Your calculations here
var invoiceMultiplied = $(this).val()*5;
// Update another element with the result
$('#AnotherElement').html(invoiceMultiplied);
}
);
If your calculations are extremely complex or you need to access other data that's not loaded on the page, then you will want to consider AJAX with your server side language of choice.
JSfiddle: http://jsfiddle.net/technotarek/QSv4h/
Can someone point out why this isn't working? I'm trying to click on Div A within a Container Div, and on click, go up to the parent container, find the next Div B, and toggle its visibility.
Note: The reason I'm doing it like this is I don't want to show ALL divs with the "child" class. Only the next one after the parent div.
http://jsfiddle.net/vecalciskay/54HxU/5/
HTML:
<div class="container">
<div class="parent">
<span> Parent Text (click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
<div class="parent">
<span> Parent 2 (don't click) </span>
</div>
<div class="child">
<table>
<tr>
<td>
This
</td>
<td>
Table
</td>
</tr>
<tr>
<td>
Should Not
</td>
<td>
Expand
</td>
</tr>
</table>
</div>
JQUERY:
$(document).ready(function () {
$('.child').hide();
$('.parent').click(function () {
var obj = $(this).parent().next(".child");
obj.toggle("fast");
return false;
});
});
Thanks to all the comments, I realized I was misinterpreting the siblings. Problem solved!
I am playing around with the JavaScript functions insertAfter and insertBefore, however I am trying to insertAfter and insertBefore two elements.
For instance, consider the following HTML:
<table>
<tbody>
<tr>
<td>
Item 1
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Item 2
</td>
<td>
<div class="moveUpDown">
<div class="up">
</div>
<div class="down">
</div>
<div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>
1
</td>
</tr>
</table>
</td>
</tr>
</table>
Then I have this JavaScript code snippet:
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
Basically when the Up class is called, the previous row is moved up and when the Down class is called, the current row is moved down one row.
What I want to do, is move the rows Up/Down 2 rows... meaning something like row.prev().prev() or row.next().next() however this does not seem to work.
Is there an easy way around this?
Would appreciate any help/suggestions.
to go up
row.prev().prev().before(row)
to go down
row.next().next().after(row)
obviously the tr must exist prev/next have to exist
NB you are caching row as the first tr element so row is changing every time the first tr element change
listen to event
$("table").on("click","tr > td > span.moveup", function() {
var row = $(this).parent().parent();
if (row.prev().prev().get(0)) row.prev().prev().before(row)
})