I have an html table within a list view, and have a hidden label in it called "vehicle_num". I am able to get the selected row of the table, as well as any of the td, however I cannot seem to get the value of the label. I have tried:
var vehicle_number = $(this).closest('tr').children('#vehicle_num').text();
Below is the code for the listview. How can I get the value of the label?
<asp:ListView ID="lvEquipmentList" runat="server" DataKeyNames="vehicle_number">
<LayoutTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%><label class="vehicle_num" hidden="hidden"><%#Eval("vehicle_number")%></label></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<table id="table-equipment-list" class="table table-list">
<thead>
<tr>
<th scope="col" class="product-line">Product line</th>
<th scope="col" class="model-number">Model #</th>
<th scope="col" class="serial-number">Serial #</th>
<th scope="col" class="dar-status">DAR Status</th>
<th scope="col" class="ship-date">Ship Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="product-line"><div class="icon"></div> <span class="line-title"></span></th>
<td class="model-number"></td>
<td class="serial-number"></td>
<td class="dar-status"></td>
<td class="ship-date"></td>
</tr>
</tbody>
</table>
</EmptyDataTemplate>
</asp:ListView>
EDIT
I have edited the code above to put the label in a table column. I was able to get the value using:
var vehicle_number = $(this).closest('tr').find('.vehicle_num').text();
This is invalid markup:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label>
</tr>
There's an errant label as a child of a tr, which isn't valid. When the browser tries to make sense of this, it could be doing anything with that label to construct a valid DOM, which is going to effect your jQuery selectors.
The label needs to be in a table cell:
<tr>
<th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th>
<td class="model-number"><%#Eval("model")%></td>
<td class="serial-number"><%#Eval("serial_number")%></td>
<td class="dar-status"><img src='<%#Eval("display_status") %>'/></td>
<td class="ship-date"><%#Eval("date")%></td>
<td><label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label></td>
</tr>
(Or, if it's always hidden anyway, you can probably put it in an existing table cell. Either way should work.)
Additionally, if the client-side id is being explicitly set here, then any repetition of these records will result in duplicate ids in the DOM, which is also invalid. Different browsers respond to id-based selectors in different ways when there are duplicate ids, because the behavior is undefined. You probably want to use a class instead:
<label class="vehicle_num" ...
Since the label is no longer a child of the tr but rather a descendant of it, use find() instead of children():
$(this).closest('tr').find('.vehicle_num')
Related
I've created a table and I need to populate the tds using JavaScript because the data is coming from the server.
Here is my table:
<table id="report" class="infoRecurso" id='testExportId' style="width: 100%; color: #363636">
<thead style="color: #363636">
<tr class='btn-danger' style="background-color: lightgray; color: #363636">
<th class="thData">Data</th>
<th id="timeIniticial" class="thInicio">Início</th>
<th class="thTermino">Término</th>
<th class="thDuracao">Duração</th>
<th class="thAtividades">Atividades</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td style="text-align: left;"></td>>
<td id="inicialTime"></td>
<td>Hora Final</td>
<td style="text-align: left;">Duração</td>
<td colspan="1" class="quebraLinha" style="text-align: left;"></td>
</tr>
<tr>
<th class="horasTotaisTh" colspan="3"> Horas Totais </th>
<th class="resultadoHorasTotaisTh" colspan="4">Hora Total</th>
</tr>
</tbody>
I am trying to populate the td with the id inicialTime that is corresponding to the tr timeIniticial. I've tried using this code:
var data = [{"product": "RD0"}, {"product": "RD1-184"}, {"product": "RD1-185"}];
var table = $('.infoRecurso');
$.each(data, function(i, value) {
table.find('tr').eq(i).find("td[id='inicialTime']").text(value.product);
});
but this code only populates the first position.
How can I populate the rest of tds positions?
Your question leaves a few points open, so I can only guess what you really want. In the following snippet I have compiled a solution that will .prepend() some html code to your table, to the effect that your second column is always filled with the code from your data array. I changed the id attribute of this <td> element to class since IDs must always be unique.
I also "corrected" your colspan attributes of the last table row since there are only 5 columns in total.
var data = [{"product": "RD0"}, {"product": "RD1-184"}, {"product": "RD1-185"}];
var html=data.map(({product})=>
`<tr><td></td><td class="inicialTime">${product}</td><td>Hora Final</td>
<td>Duração</td><td class="quebraLinha"></td></tr>`).join('')
$('.infoRecurso tbody').prepend(html);
td {text-align:left}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="infoRecurso" id='testExportId' style="width: 100%; color: #363636">
<thead style="color: #363636">
<tr class='btn-danger' style="background-color: lightgray; color: #363636">
<th class="thData">Data</th>
<th class="thInicio">Início</th>
<th class="thTermino">Término</th>
<th class="thDuracao">Duração</th>
<th class="thAtividades">Atividades</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th class="horasTotaisTh" colspan="3"> Horas Totais </th>
<th class="resultadoHorasTotaisTh" colspan="2">Hora Total</th>
</tr>
</tbody>
I'm trying to create a table with multiple rows and one of the rows containing repetitive column headers like below.
I'm not sure how to use ng-repeat in angularjs to create these headers. I tried putting ng-repeat in <tr> element which obviously won't work as it creates multiples rows.
I also tried putting it in a <th> element but the headers won't appear alternatively.
I want to use ng-repeat (to display Current and Prior headers) rather than manually typing them like in the code below because number of times the the repetitive columns appear is dynamic (dependent on row 1).
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{ year }}
</th>
</tr>
<tr>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
There is ng-repeat start and end directive for this kind of situations:
angular.module("Test", []).controller("repetition",
function($scope)
{
$scope.years = function()
{
return [2017, 2018];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="Test" ng-controller="repetition">
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<th ng-repeat-start="year in years()" id="{{year}}planning" style="background-color:#EEEEEE" scope="col" class="tsub-head">Current</th>
<th ng-repeat-end id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
<tbody></tbody>
</table>
Everithing in between the tags containing ng-repeat-start and ng-repeat-end will be included in the repetition.
By the way the same exists for ng-if (ng-if-start/ng-if-end)
Looking for the picture you provided, the solution lies in wrapping "current" and "prior" <th> with a <div> with ng-repeat directive. Like this:
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<div ng-repeat="year in years()">
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</div>
</tr>
</thead>
I'm using bootstrap table. In that I want to perform an action when i click on checkbox in table to get Item ID value.
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
Jquery function :
$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
alert("Hello");
var values = "";
$.each($("input[name='btSelectItem']:checked"), function(index, value) {
var data = $(this).parents('tr:eq(0)');
if(index > 0)
values ++;
values +=$(data).find('td:eq(1)').text();
});
alert(values);
});
When i click on checkbox my function was not calling, Kindly help me to resolve this. Thanks in advance
Below is my table Code :
<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>
Besides the selector was wrong, the problem is that bootstrap table js code captures the event when you click and stops its propagation, so it never bubbles up and you can't capture on a document level.
The good news is that it provides an API to capture such events. In this case you can use several events like onCheck, onCheckSome, as noted in the docs, e.g.:
$('#table-style').on("check.bs.table", myFunc);
Since you're already attaching the event handler to the input element, you don't need any further filter in on.
Try with:
$(document).on("click", "input[name='btSelectItem']", function(){ ... })
jsFiddle
I am trying to replicate this html code into asp.net aspx page source.
While doing so, the following table elements like field, fitColumns are not recognized by the VS IDE although the link is provided for jeasyui.js.
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
I managed to do this as per the jeasyui documentation.
<table class="cartcontent"
data-options="fitColumns:true, singleSelect: true">
<thead>
<tr>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'quantity',width:100">Quantity</th>
<th data-options="field:'balance',width:100,align:'right'">Balance</th>
<th data-options="field:'remove',width:100,align:'right'">Remove</th>
</tr>
</thead>
</table>
Ok i know this might sound like a duplicate question, as a lot of questions have been asked like this one...but i have looked into almost all of them and could not find what the solution.
Ok I am getting the following response from the server using normal ajax call:
<form id="ctl00" name="ctl00" method="post" action="RatesGrids.aspx?pt=EMPL&RT=bill">
<div>
<input id="__VIEWSTATE" type="hidden" name="__VIEWSTATE" value="/wEPDwUENTM4MQ9kFgJmD2QWAmYPPCsADQEADxYCHgtfIUl0ZW1Db3VudAICZGQYAQUMZ3JkQmlsbFJhdGVzDzwrAAoBCAIBZE4pvNtSHIbu7h7ISmN42ktJBm5R">
</div>
<div>
<table id="grdBillRates" class="tableView" cellspacing="0" rules="all" border="1" style="width:100%;border-collapse:collapse;">
<thead>
<tr class="tableViewHeader">
<th scope="col" style="white-space:normal;">Emp. Id</th>
<th scope="col" style="white-space:normal;">Last Name</th>
<th scope="col" style="white-space:normal;">*Res Usage</th>
<th scope="col" style="white-space:normal;">Source</th>
<th scope="col" style="white-space:normal;">Eff. Date</th>
<th scope="col" style="white-space:normal;">*Bill 1</th>
<th scope="col" style="white-space:normal;">*Bill 2</th>
<th class="display_none" scope="col" style="white-space:normal;"></th>
<th class="display_none" scope="col" style="white-space:normal;">Time Stamp</th>
<th scope="col" style="white-space:normal;">Currency</th>
</tr>
</thead>
<tbody>
<tr class="tableViewRow" onclick="loadrowitems(0,this)" onmouseover="this.style.cursor='default';">
<td style="width:100px;white-space:normal;">10000000034 </td>
<td style="width:125px;white-space:normal;">Khan</td>
<td style="width:125px;white-space:normal;"></td>
<td style="width:80px;white-space:normal;">Local</td>
<td style="width:80px;white-space:normal;">12/04/2012</td>
<td align="right" style="width:80px;white-space:normal;">3.6500</td>
<td align="right" style="width:80px;white-space:normal;">6.0000</td>
<td class="display_none" style="width:0px;white-space:normal;">Z-C$ </td>
<td class="display_none" style="white-space:normal;">0,0,0,0,1,107,21,255</td>
<td style="width:70px;white-space:normal;">Z-C$</td>
</tr>
<tr class="tableViewAlternatingRow" onclick="loadrowitems(1,this)" onmouseover="this.style.cursor='default';">
<td style="width:100px;white-space:normal;">10000000034 </td>
<td style="width:125px;white-space:normal;">Khan</td>
<td style="width:125px;white-space:normal;">444 </td>
<td style="width:80px;white-space:normal;">Local</td>
<td style="width:80px;white-space:normal;">12/04/2012</td>
<td align="right" style="width:80px;white-space:normal;">2.1000</td>
<td align="right" style="width:80px;white-space:normal;">3.2000</td>
<td class="display_none" style="width:0px;white-space:normal;">Z-C$ </td>
<td class="display_none" style="white-space:normal;">0,0,0,0,1,107,21,254</td>
<td style="width:70px;white-space:normal;">Z-C$</td>
</tr>
</tbody>
</table>
</div>
</form>
Now i have to append the table in response in <div id="grdRates"></div>.
The application i am working on was created only keeping IE in mind, so it was catered using the following code:
if (contents) {
var table;
if ($(contents).find('table').length > 0)
table = $(contents).find('table')[0].xml
if (table) {
$('#grdRates').parent().show();
$('#grdRates').html(table);
}
}
above code was not working in Firefox as well as Chrome , was giving that xml as undefined and never showing the results, so i tried the following:
if (contents) {
var table;
if ($(contents).find('table').length > 0)
if ($.browser.msie)
table = $(contents).find('table')[0].xml
else
table = $(contents).find('#grdBillRates');
if (table) {
$('#grdRates').parent().show();
if ($.browser.msie)
$('#grdRates').html(table);
else
$('#grdRates').html(table.parent().html());
}
}
}
Note the #grdBillRates is the table id in the above HTML. Now this is working fine in firefox (showing the grid fine) but i have tried almost everything for chrome, but no luck....
And one more thing i cannot change the DLL so the solution has to be using script. Any help will be appreciated guys...Thanks
is there any error?
did you try to append it? something like this:
if (contents) {
var table = $(contents).find('#grdBillRates');
if (table.length > 0)
$('#grdRates').parent().show().append(table);
}
}