View Source:
<div class="well tile single-tile">
<thread></thread>
<table class="table table-hover table-striped table-clickable">
<tbody>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Doors</th>
<th>MPG</th>
</tr>
</tbody>
<tbody>
<!-- ng-repeat: car in cars -->
<tr ng-repeat="car in cars" ng-click="car result" class="ng-scope">
<td class="ng-binding">Toyota</td><!--{{car.Make}} -->
<td class="ng-binding">Corolla</td><!--{{car.Model}} -->
<td class="ng-binding">White</td>
<td class="ng-binding">4</td>
<td class="ng-binding">21</td><!--{{car.MPG}} -->
</tr>
<tr ng-repeat="car in cars" ng-click="car result" class="ng-scope">
<td class="ng-binding">Toyota</td><!--{{car.Make}} -->
<td class="ng-binding">Camry</td><!--{{car.Model}} -->
<td class="ng-binding">Black</td>
<td class="ng-binding">4</td>
<td class="ng-binding">20</td><!--{{car.MPG}}
</tr>
</tbody>
</table>
Protractor:
I was able to print all values in first row using
element.all(by.repeater('car in cars')).first().getText().then(function(text){and console.log(text)
and in console I saw "Toyota Corolla White 4 21" successfully.
But I want to print only the first value from first row and second row which is "Toyota". I tried using first().get(1).getText().then(function(text) and first('["$index==1"]').getText() but it's not working. My test is to verify if there is a value other than "Toyota" in first row and second row, it should fail..
Chain and extend Binding on the item.key locators
element.all(by.repeater('car in cars')).first().element(by.binding('car.Make')).getText();
for all elements
element.all(by.repeater('car in cars')).each(function(element, index) {
element(by.binding('car.Make')).getText().then(function(text) {
console.log(text);
});
}); //there might be a better way to do this
Related
I need to check all other cells in a table row to have a cell (there's a cell for each row, not one single cell) display either "entry missing" or "complete" automatically. Currently, I'm only able to make it work properly for the first row since I can only have it check the cells in the first row.
I've tried having the code iterate through the table, checking values of cells in the row with if statements and then either with the (this) function or using a ('#tdID') format.
I haven't been able to check any cell values in rows below the first when I don't use (this), but as far as I can tell, (this) only refers to the #DataEntryStatus id since it starts the function in the first line. Basically, I need something that works like (this) but with #Tool, #CutRef, and more td IDs.
$('#table_id #DataEntryStatus').each(function(){
if($('#Tool').text() =="")$(this).text("Entry missing");
else if($('#CutRef').text() =="")$(this).text("Entry missing");
else($(this).text("Complete"));
if($(this).text().toLowerCase() =="entry missing")$(this).css('background-color','#fcc');
if($(this).text().toLowerCase() =="complete")$(this).css('background-color','#af0');
});
And here is the table where the ids come from
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<th style="vertical-align:bottom;">Date</th>
<th style="vertical-align:bottom;">Coupon</th>
<th style="vertical-align:bottom;">Row</th>
<th style="vertical-align:bottom;">Axial</th>
<th style="vertical-align:bottom;">Ox Pocket</th>
<th style="vertical-align:bottom;">SM Pocket</th>
<th style="vertical-align:bottom;">Tray #</th>
<th style="vertical-align:bottom;">Angle</th>
<th style="vertical-align:bottom;">Probe</th>
</tr>
<tbody id="myTable">
{% for item in items %}
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus"><div>{{ item.DataEntryStatus }}</div></td>
<td id="Tool"><div>{{ item.Tool }}</div></td>
<td id="CutRef"><div>{{ item.CutRef }}</div></td>
<td id="CutDate"><div>{{ item.CutDate }}</div></td>
<td id="Coupon"><div>{{ item.Coupon }}</div></td>
<td id="Row"><div>{{ item.Row }}</div></td>
<td id="Axial"><div>{{ item.Axial }}</div></td>
<td id="OxPocket"><div>{{ item.OxPocket }}</div></td>
<td id="SmPocket"><div>{{ item.SmPocket }}</div></td>
<td id="TrayNum"><div>{{ item.TrayNum }}</div></td>
<td id="Angle"><div>{{ item.Angle }}</div></td>
<td id="Probe"><div>{{ item.Probe }}</div></td>
</tr>
{% endfor %}
</tbody>
</table>
I want it to check each row individually and identify which rows are filled with values and which aren't, but currently it only checks the cells of the first row and prints the same output for every status cell in later rows.
You can iterate each tr in the table directly and then every cell. Reference for the :gt pseudo selector
// Check each row in table
$('#table_id tbody tr').each(function() {
$row = $(this)
$status = $row.find('#DataEntryStatus');
// Iterate every cell, but skip the first two in each row
// (action and status cell). Be sure to update this value if you change
// the table structure
$row.find('td:gt(1) div').each(function() {
$status.text("Complete").css('background-color', '#af0');
if ($(this).text() == "") {
$status.text("Entry missing").css('background-color', '#fcc');
// The row is invalid, break from the each()
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<!-- Simplified for convenience -->
</tr>
<tbody id="myTable">
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus</div>
</td>
<td id="Tool">
<div></div>
</td>
<td id="CutRef">
<div>CutRef 1</div>
</td>
<!-- Simplified for convenience -->
</tr>
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus 2</div>
</td>
<td id="Tool">
<div>Tool 2</div>
</td>
<td id="CutRef">
<div>CutRef 2</div>
</td>
<!-- Simplified for convenience -->
</tr>
</tbody>
</table>
You can try this, Here I am getting each row, Then getting each cell/column of that row, Then checking for empty....
You can replace with any value in if instead of empty...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='myTable' border>
<tr>
<td>
Row1 Col1
</td>
<td>
Row1 Col2
</td>
</tr>
<tr>
<td>
Row2 Col1
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Row3 Col2
</td>
</tr>
</table>
<script>
$("#myTable tr").each(function(rowNum,row){
for(var i = 0; i < row.children.length; i++) {
if(row.children[i].innerHTML == ""){
row.children[i].innerHTML = "Entry Missing"; //Set text of current cell as 'Entry Missing'
}
}
});
</script>
I have a simple app which displays a fruit and its color inside a table. There is a table component and row component. The table component's HTML looks like this:
<table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></row-component>
</tbody>
</table>
The row component's HTML looks like this:
<tr>
<td>{{$ctrl.fruit.name}}</td>
<td>{{$ctrl.fruit.color}}</td>
</tr>
As you can see, the table component has an ngRepeat directive on the row component. The problem is that rendered markup looks like this:
<table-component class="ng-isolate-scope"><!-- ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Apple</td>
<td class="ng-binding">Red</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Banana</td>
<td class="ng-binding">Yellow</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Pear</td>
<td class="ng-binding">Green</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
</tbody>
</table></table-component>
The browser doesn't know how to handle the row-component tag and the table ends up looking like this:
What do I need to do to get the rows to render correctly? I have the full CodePen code here.
A simple solution would be to convert your component to a directive and add it to a tr element as an attribute
<table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></tr>
</tbody>
</table>
NOTE: i left the name of the component as is to be better understandable in your example, it would be better if you changed it to something more appropriate than row-component since it is not a component anymore.
I am generating a very simple table by binding a table to an array. And I use the contenteditable="true" so I can edit each cell data on the client side. Here is my code:
<table class="table">
<tr>
<th>Id</th>
<th>Value</th>
<th></th>
</tr>
<tr *ngFor="let item of keys">
<td>{{ item.id }}</td>
<td contenteditable="true">
{{ item.Value }}
</td>
<td>
<button type="button" (click)="printContent()" class="btn btn-primary">Print</button>
</td>
</tr>
</table>
How can I detect the text changes on the cell that has contenteditable set to true
I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?
You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>
https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>
I am trying to create a form that, when submitted, lists all available flights within the users' specifications by using Listjs. I don't know what is going wrong, but when I try to manually add something to the list, nothing happens.
HTML:
<div class="box-body table-responsive no-padding" id="search-list">
<table class="table table-hover">
<tr>
<th class="sort" data-sort="flight">Flight</th>
<th class="sort" data-sort="departure">Departing</th>
<th class="sort" data-sort="arrival">Arriving</th>
<th class="sort" data-sort="duration">Dur.</th>
<th class="sort" data-sort="aircraft">Aircraft</th>
<th class="sort" data-sort="cat">CAT</th>
<th class="sort" data-sort="operation">Operating</th>
<th class="sort" data-sort="carrier">Carrier</th>
</tr>
<tbody class="list">
</tbody>
</table>
</div>
<div style="display:none;">
<!-- A template element is needed when list is empty, TODO: needs a better solution -->
<tr id="search-item">
<td class="flight"></td>
<td class="departure"></td>
<td class="arrival"></td>
<td class="duration"></td>
<td class="aircraft"></td>
<td class="cat"></td>
<td class="operation"></td>
<td class="carrier"></td>
</tr>
</div>
I'm not 100% sure if it is relevant, but I also get this script error from the list.min.js file Uncaught TypeError: Cannot read property 'cloneNode' of null.
Javascript:
<script src="../js/list.min.js" type="text/javascript"></script><!-- List.js -->
<script type="text/javascript">
var options = {
valueNames: [ 'flight', 'departure', 'arrival', 'duration', 'aircraft', 'cat', 'operation', 'carrier' ],
item: 'search-item'
};
var searchlist = new List('search-list', options);
searchlist.add({ flight: 'mdkwoan', departure: 'afds2f', arrival:'adsfwef', duration:'Fjwefjhidni', aircraft:'ksoksj', cat:'kaojajs', operation:'joskemeks', carrier:'fasfbijbfiukfd' });
</script>
You cannot use a "tr" as the template according to the docs
â—¦item String, default: undefined ID to item template element or a
string of HTML (notice: does not work with <tr>)
Here is the link to the docs with this verbiage - http://listjs.com/docs/options
This should work though. Update your tbody to this and leave out the template in your options
<tbody class="list">
<tr id="search-item">
<td class="flight"></td>
<td class="departure"></td>
<td class="arrival"></td>
<td class="duration"></td>
<td class="aircraft"></td>
<td class="cat"></td>
<td class="operation"></td>
<td class="carrier"></td>
</tr>
</tbody>