I'm trying to sort several values in a td, I would like to know a more effective way, I used (yadcf) but I couldn't get a property that looks for the value of each tag
Example
Order by:Tag 1 (show taghead name) on click sort tag values
Tag 2
tag 3
datatable:
<table>
<thead>
<tr>
<td>col1</td>
<td>col 2</td>
</tr>
<thead>
<tbody>
<tr>
<td>value</td>
<td>
<div class="tag1">
<div class="taghead">tag1</div>
<div>value</div>
</div>
<div class="tag2">
<div class="taghead">tag2</div>
<div>value</div>
</div>
<div class="tag3">
<div class="taghead">tag3</div>
<div>value</div>
</div>
</td>
</tr>
<tbody>
</table>
Related
I am using Spring Boot Thymeleaf and wanted to take conditional based decision. If condition matches, then whole row should be green else red
<body>
<div class="container my-2">
<h1>Active Workflow Details</h1>
<div class="card">
<div class="card-body">
<div th:switch="${mdsAcives}" class="container my-5">
<div class="col-md-10">
<h2 th:case="null">No record found !!</h2>
<div th:case="*">
<table border="1" class="table table-striped table-responsive-md">
<thead>
<tr>
<th>Mapping Name</th>
<th>Type of Mappings</th>
<th>Table Names</th>
<th>System 1 Count </th>
<th>System 2 Count </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="m : ${mdsAcives}">
<td th:text="${m.mappingName}"></td>
<td th:text="${m.type}"></td>
<td th:text="${m.tableName}"></td>
<td th:text="${m.system1Cnt}"></td>
<td th:text="${m.system2Cnt}"></td>
<td th:style="${m.system1Cnt} eq ${m.system2Cnt} ? 'color: red;' : 'color: green;'}}" th:text="TRUE or FALSE"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You can do something like this:
<tr th:class="${your condition}? 'green' : 'red'">
I assume you have defined two CSS classes to make the row green or red.
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
I have a table that looks like this:
<table>
<thead>
<tr>
<th data-th-key="col1"> <span> Foo </span> </th>
<th data-th-key="col2"> <span> Bar </span> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input data-model-key="col1">
</div>
</td>
<td>
<div>
<input data-model-key="col2">
</div>
</td>
</tr>
</tbody>
</table>
To find the right input element I have to know the data-th-key from the table head. Is there any way to use the first xpath inside the second one?
Xpath one:
//table//thead//span[translate(normalize-space(.),'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')='foo']/parent::th/#data-th-key"
Xpath two:
//table//tbody//tr//td//div//input[#data-model-key='col1']
So I want to replace the col1 value in the second one with Xpath one.
You can write an expression like
//table//tbody//tr//td//div//input[#data-model-key = //table//thead//span[translate(normalize-space(.),'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')='foo']/parent::th/#data-th-key]
yes, that is possible and meaningful and selects the input (or the inputs) whose data-model-key is equal to that data-th-key attribute.
this seems like a scope problem, but i am not sure. my goal is to highlight a single row in a table. that implies that any previously highlighted row is returned to an unhighlighted state. the rows are created with the ng-repeat directive, like this:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle"> <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td> <td>
{{item.usefulflag}
</td> </tr>
</tbody>
</table>
</div>
i have code in a .js file that looks like this:
$("tr").mouseenter(function(){
alert("mouseenter");
});
the row in the table header reacts with the alert, but there is no reaction from the rows created by ng-repeat. how do i correct?
You can actually achieve this effect by using an ng-class in conjuction with ng-mouseenter and ng-mouseleave like so:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr>
<th>Year</th>
<th>Name</th>
<th>Useful Flag</th>
</tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
<td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
</td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td>
<td>
{{item.usefulflag}
</td>
</tr>
</tbody>
</table>
</div>
In this case you don't need the jquery syntax. If you haven't already you should also read https://stackoverflow.com/a/15012542/281335.
I need to detemine xpath for element mainForm:queryConfigure:fetchReport.
<span id="mainForm:queryConfigure:j_id18">
<table id="mainForm:queryConfigure:j_id19"
class="showReportTable" align="center">
<tbody>
<tr>
<td>
<input id="mainForm:queryConfigure:fetchReport" type="image"
src="images/show_report.gif" name="mainForm:queryConfigure:fetchReport"/>
</td>
</tr>
</tbody>
</table>
</span>
I tried
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport'][#type='image'][#src='images/show_report.gif']");
and
selenium.click("//input[#id='mainForm:queryConfigure:fetchReport']");
One more case:
<div class="tabUnselectedText" align="center">
Notifications
</div>
Id and name attribute values are acceptable locators for method click. See locating elements in the documentation.
selenium.click('mainForm:queryConfigure:fetchReport');