I have the following table:
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click=...>
when a row is clicked than the row expands and additional information is shown to this row - this works fine.
In this row there is also a column (myColumn) which can be clicked.
If this column is clicked than first the row expands and than the proper click event is handled. Is there a way to prevent the expandation of the row when the column myColumn is clicked?
The reason it is happening because of event bubbling and to stop it event.stopPropogation() can be used.
While clicking the column bind a method; and use $event to prevent default
<table>
<tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" data-ng-click="toggleColumn($event)">
And in Controller:
$scope.toggleColumn = function(e){
e.stopPropogation(); //This would prevent event bubbling from td to tr
e.preventDefault(); //This will prevent default action like link load on click of hyperlink
//toggle functionality
}
You need to bind the row click event in column and remove from the row.
Please check the bellow.
<table>
<tr data-ng-repeat-start=... data-ng-click="">
<td class="myColumn" data-ng-click="contactGroup.expanded = !contactGroup.expanded; <columnClickEventHandl>">
try
<table>
<tr data-ng-repeat-start=...
ng-click="!contactGroup.expanded && contactGroup.expanded = !contactGroup.expanded">
<td class="myColumn" ng-click=...>
note, that assignment in the row's ng-click's expression will be executed only when contactGroup.expanded is false
Related
I am fairly new to do things in Angular so I might overlook something:
I am generating a multiple div rows with *ngFor. Each of the row has a toggle button and a hidden sub-div (and the sub-divs can also have hidden sub-divs).
What I want to try and do is to show and hide the sub-divs independently when clicking on the toggle button (and also the toggle button icon should change). I managed to get it working either with opening all divs at the same time or when clicking on one row-toggle it will open the sub-div.
But when I click on another it will close the previous one that was clicked and open the currently clicked on one.
I was thinking about using an array but that would only work for the first layer of divs and not for the nested ones (since I don´t know how many, initially).
Here some illustration of opened sub- and sub-sub divs:
rows rows
>AA -AA
>BB >aa
>CC -> >BB
>DD -CC
>FF -cc
c
>DD
-FF
>ff
<div *ngFor="hero of heroes">
{{ hero.name }}
<button (click)="hero.show = !hero.show">show/hide</button>
<div class="sub" *ngIf="hero.show">
more info here
</div>
</div>
Add some css to emphasize the sub section
You need accordion
try this:
You can make use of simple CSS and make it simple.
HTML
<table class="table">
<tbody>
<tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
<div (click)="getSub(game.label);">
<!-- use the uniqueId here -->
<td>{{game.date}}</td>
<td>{{game.label}}</td>
<td>{{game.score}}</td>
</div>
<table>
<tbody [ngClass]="{activetab: isActive(game.label)}">
<tr *ngFor="let subgame of game.sub">
<td>{{subgame.date}}</td>
<td>{{subgame.label}}</td>
<td>{{subgame.score}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
CSS
tr .activetab {
display: block !important;
}
TS
isActive(id) {
return this.selected === id;
}
getSub(id) {
//TODO//
this.selected = (this.selected === id ? null : id);
}
I think this should work fine.
Three steps working for my table row highlighting.
on hover the background is highlighted blue.(basically, to show you can highlight it)
click event highlights the background row blue.
click a highlighted row it un highlights.
These are working good.
The problem
When i click a highlighted row to un highlight it wont show that it's un highlighted while the mouse is hovering. Only, on mouse leave.
I need it to be able to disable the hover so it can show that its un highlighted as soon as its clciked to un highlight. Trick is i only need the hover disabled only on that click. I need it to be able to hover again, and go through the same process.
HTML
<table class="superusertable" cellpadding="5" cellspacing="0">
<tbody class="table-font">
<tr ng-init="highlightAllRows(source)" ng-repeat="source in userData"
ng-model="source.fromSourceID"
ng-class="{'sourcesSelected': source.sourcesSelected}"
ng-click="select(source)">
<td width="290px">
<div class="action-checkbox"; width="290px">{{source.fromSourceID}}
</div>
</td>
</tr>
</tbody>
</table>
angular
highlight all rows sets all the rows initially highlighted.
$scope.highlightAllRows = function(item){
item.sourcesSelected = true;
};
$scope.select = function(item) {
item.sourcesSelected = item.sourcesSelected ? false : true;
};
CSS
.superusertable tr:hover{
background-color: #80CCFF !important;
}
is there a simple css,jquery, angular solution to disable the hover when highlighted row is clicked. I need hover to work again when you hover back
I have a React component for a table. If the user is not me, then when I see that user's profile page, I only see the first three columns of the table. If the user is me, then I see four columns. However, dynamically changing the columns causes the following error:
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 3 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID `.0.1.1.0.0.1.0.0`.
I've looked around a lot and made sure that my table is encased with . How can I allow for this table flexibility in React?
My outer table shell looks like this:
var CategoriesTable = React.createClass({
render: function() {
var includeReps = false;
var repsHeader = '';
if (this.props.currentUser.username === this.props.user.username) {
includeReps = true;
repsHeader = <th>Reps</th>;
}
return (
<div className="categoriesTable panel panel-default">
<CategoriesHeader user={this.props.user} />
<table className="table table-bordered table-striped">
<tbody>
<tr>
<th>Category</th>
<th>Direct Rep</th>
<th>Crowd Rep</th>
{repsHeader}
</tr>
{this.props.user.categories.map(function(category) {
return <CategoriesItem key={category.id} category={category.name} directRep={category.directScore} prevDirectRep={category.previousDirectScore} crowdRep={category.crowdScore} reps={category.reps} includeReps={includeReps} />;
})}
</tbody>
</table>
</div>
);
}
});
Each table row looks like this:
var CategoriesItem = React.createClass({
render: function() {
var reps = this.props.includeReps ? <td>{this.props.reps}</td> : '';
return (
<tr className="categoriesItem">
<td>{this.props.category}</td>
<td><ScoreBar directRep={this.props.directRep} prevDirectRep={this.props.prevDirectRep} category={this.props.category}/></td>
<td>{this.props.crowdRep}</td>
{reps}
</tr>
);
}
});
Why can I do to make React accept these table changes? When I start with the table with all four columns and then switch to a different user's profile page, the fourth table data piece becomes a
Perhaps a hack, but giving a react component a key will force the entire component to re-render when the key changes. If each profile page gives the table a unique key, then this problem goes away.
I have a table where the user can add rows to it but each row is numbered. Now the user enters a number in a textbox for the number of rows he/she wants to add before they actually start adding rows. Below is the code where if the number of rows that has been added is over the number entered by the user, then it stops adding the rows.
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
Example: if user entered in the number 5 in a textbox, then the user can only add 5 rows, if the user tries to add another row, then no row is added because user can't add more than 5 rows.
What my question is that if the user has already reach the max number of rows they have added, then I want it to disable a textarea (user wont be able to click in the textarea and I want to give it the correct colour so that you can tell the textarea is disabled). I also want to disable a hyperlink so that user cannot click on the hyperlink (again suitable color change so user can tell hyperlink is disabled) Does anyone know how to do this?
Below is code for hyperling and the textarea:
<table id="question">
<tr>
<th colspan="2">
Question Number <span id="questionNum">1</span>
</th>
</tr>
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
<span href="#" class="link">[Question link]</span>
</td>
</tr>
</table>
Jquery code showing example of how a table row is added:
function insertQuestion(form) {
var questionarea=(form.questionText.length)
? form.questionText[0]
: form.questionText;
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
alertErrors = "";
// Note, this is just so it's declared...
if (questionarea.value == ""){
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $qid = $("<td class='qid'>" + qnum + "</td>");
$tr.append($qid);
$tbody.append($tr);
}
Html table where the table row is added to:
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>
look at this jsfiddle for example here, you can write a question on top using the textarea and when you have done that then click on the button to add it in a new row. It is the top textarea I want to disable only if the number of rows has met its limit.
Are you adding rows via JavaScript/Ajax or on page load?
If the former (which I'm guessing your first code example illustrates), use a JavaScript counter to represent the number of rows, and when they trigger the add row function (which you write), check that number first; alert and disabled accordingly:
jQuery allows you to disable form elements, and just replace the link with the link text (ie. minus the tag), and modify it's color, either with a $(ele).css() call, or by wrapping it in a span tag.
If the latter, you can just write the textarea via PHP with the disabled="disabled" property added to the opening tag. The link: use the same method as above (wrapping it in a span tag, rather than an a tag).
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
Obviously, you need to include the jQuery framework. I usually use Google's: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.
I have a page in active tab.
I need to find in this page a table:
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="details">
grab it until next </table>-tag,
and use it (to paste it in a new tab, popup, or just in "alert").
The easiest would be to use jQuery to select the table and return the HTML. For example $('table').html() will return a string of the <table> markup.
I wouldn't include jQuery for such an easy task.
var table = document.getElememtsByTagName("table")[0]; //if it is the first or only table, you could change 0 to any other number if the table always is at the same position
or you could give your table an id:
var table = document.getElementById("my-table");
to get the html just call
var foo = table.innerHtml;