Using jQuery I have a button Hide Columns option. I want to add a button to each column head in the table. Having added by jQuery is preferred. The Button will hide it's respective column. It appears that the button when appended does not utilize the jQuery to hide column. I have copied and pieced different parts together. Please help me I don't really know this.
$(document).ready(function(){
$("#btn").click(function(){
$("th").append('<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
});
});
$(function() {
// on init
$(".table-hideable .hide-col").each(HideColumnIndex);
// on click
$('.hide-column').click(HideColumnIndex)
function HideColumnIndex() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
// get cell location - https://stackoverflow.com/a/4999018/1366033
var colIndex = $cell[0].cellIndex + 1;
// find and hide col index
$table.find("tbody tr, thead tr")
.children(":nth-child(" + colIndex + ")")
.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style></style>
</head>
<body>
<button id="btn">Hide Columns option</button>
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
x
</button>
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns">
<tr>
<th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>
I hope this is you want:
UPDATE:
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data("toggleclicked", 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
})(jQuery);
//NEW FUNCTION:
function addColumnsOption(view, className) {
if (view == 1) {
$("#myTable thead tr th").append(
"<button class='pull-right btn btn-sm btn-danger btn-condensed " +
className +
"'><i class='bi bi-trash3'></i></button>"
);
} else if (view == 0) {
$("#myTable thead tr th ." + className + "").remove();
}
}
$(document).ready(function () {
$("#btn").clickToggle(
function () {
addColumnsOption(1, "removeButton"); //1 for show
let theadThLength = $("#myTable thead th").length;
for (let i = 0; i < theadThLength; i++) {
$(".removeButton").eq(i).click(function () {
let tbodyTrLength = $("#myTable tbody tr").length;
for (let t = 0; t < tbodyTrLength; t++) {
$("#myTable tbody tr").eq(t).find("td").eq(i).hide();
$("#myTable thead th").eq(i).hide();
$(".footer-restore-columns").removeClass("d-none");
}
});
}
},
function () {
addColumnsOption(0, "removeButton"); //0 for hide
}
);
$(".restore-columns").click(function () {
$("#myTable tbody tr td").show();
$("#myTable thead th").show();
$(".footer-restore-columns").addClass("d-none");
});
});
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<button class="btn btn-sm btn-primary mb-2" id="btn">Show Columns option</button>
<table id="myTable" class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns d-none">
<tr>
<th colspan="4"><a class="restore-columns " href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
Related
How to set table row background-color with css pseudo class :has() only when button clicked and class "group-process" added to each row in tbody?
When I click button with id "group_processing_button" displays block with class "group-processing". Also when I click this button only rows which have class i[class$="fa-check-square"] must have background-color: #9e9; I mean this css style must work:
.table tbody tr[class$="group-process"]:has(td.no):has(i[class$="fa-check-square"]) {
background-color: #9e9;
}
Only when block with class "group-processing" displayed by button.
When I click and display off the block with class "group-processing", rows which have class i[class$="fa-check-square"] must have background-color: transparent, this style must not work:
.table tbody tr[class$="group-process"]:has(td.no):has(i[class$="fa-check-square"]) {
background-color: #9e9;
}
Thank You for help!
var $groupProcessingContainer = jQuery('.group-processing');
var $groupProcessingTable = jQuery('.table-order');
jQuery('#group_processing_button').click(function() {
var $rows = $groupProcessingTable.find('tbody tr');
$rows.each(function() {
var $row = jQuery(this);
if ($row.hasClass('group-process')) {
$row.removeClass('group-process');
} else {
$row.addClass('group-process');
}
});
$groupProcessingContainer.slideToggle();
});
tr td.no .group-check {
display: none;
}
tr.group-process td.no .group-check {
display: inline;
}
.table tbody tr[class$="group-process"]:has(td.no):has(i[class$="fa-check-square"]) {
background-color: #9e9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-info" id="group_processing_button">Group processing</button>
<div class="group-processing" style="display: none;">Block for filtering</div>
<table class="iblock table table-striped table-bordered table-hover table-order">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Supplier</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="no">1.<i class="fa group-check fa-check-square"></i></td>
<td>
item_name
</td>
<td>Supplier_name</td>
</tr>
<tr class="even">
<td class="no">1.<i class="fa fa-square-o group-check"></i></td>
<td>
item_name
</td>
<td>Supplier_name</td>
</tr>
</tbody>
</table>
there is an input textbox with the name Basic (id=cb) and two html table cell values with ids le10 and le11. I have to check the input value upto 3 consecutive levels (2 values from 1st table and 3rd one from 2nd table).
say for eg. if the input value is 69000, the two cell values of table id le10 i.e. 69000 and 71100 to be highlighted (its working with the jquery function)
The 3rd value is to be set in the table id le11. The very next higher value to the 71100 is 71800 in the 2nd table i.e. id le11. This 71800 to be shown in the input box id= nb.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
</td>
<td>
<table id="le11" class="table table-responsive table-striped">
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
</td>
<td>
Next Basic</td><td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--match and highlight the Current basic textbox value with the level table-->
<script>
$(function () {
$('#cb').on('change keyup', function() {
var search = $(this).val();
$('table#le10 tr td').filter(function() {
if($(this).text() == search){
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').closest('tr').next().addClass('highlight2');
var aftinc = $(this).parent('tr').closest('tr').next().text();
$('#aftinc').val(aftinc);
}else{
$(this).parent('tr').removeClass('highlight');
$(this).parent('tr').closest('tr').next().removeClass('highlight2');
}
})
});
});
//for extending the search to the 2nd table
$(function () {
$('#aftinc').on('input', function() {
var search2 = $(this).val();
$('table#le11b tr td').filter(function() {
if($(this).text() == search2){
$(this).closest('tr').next().addClass('highlight2');
}else{
$(this).closest('tr').next().removeClass('highlight2');
}
})
});
});
</script>
</body>
</html>
You are very close to the answer, what you left to do is to find the next higher value in table #le11. To start the search for next higher value, You can simply put the code after searching first two values.
I referred to this answer to get the next higher value as below:
push values from table #le11 to an array
if there is second value aftinc, find the next higher value of aftinc by Math.reduce
if there is third value found, search and highlight the corresponding cell
I have also make some minor changes to the code, like
change $(this).parent('tr').closest('tr') to $(this).parent('tr'), as mentioned in the comments they output the same result
clear all highlight classes before doing another search, instead of clear it while searching
You can try the code here:
$(function () {
// get values from table le11 for comparison
let tableValues = [];
$('#le11 tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le10 tr').removeClass('highlight highlight2');
$('#le11 tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le10
var aftinc = 0;
$('#le10 tr td').each(function () {
if ($(this).text() == search) {
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').next().addClass('highlight2');
aftinc = $(this).parent('tr').next().text();
$('#aftinc').val(aftinc);
}
});
// if values found, find next higher value in #le11
if (aftinc > 0) {
const closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le11 tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
</td>
<td>
<table id="le11" class="table table-responsive table-striped">
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
</td>
<td>
Next Basic</td><td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have the below sample html table definition.
<table id="myDynamicTable" class="table-striped" >
<thead class="ui-widget-header_custom dataTables_wrapper no-footer">
<tr id="uploadrow_0" class="">
<th style="white-space: nowrap;display: table-cell;width: 2px; text-align: center " class="text-left" >
Row#
</th>
<th style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_nationality">
Nationality
</th>
<th style="white-space: nowrap;display: table-cell; text-align: center " class="text-left">
No of Visitors
</th>
<th style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_remark">
Remarks
</th>
</tr>
</thead>
<tbody>
#if (Model.VisitDetails.Any())
{
foreach (var item in Model.VisitDetails)
{
#Html.Partial("VisitDetailsPartial", item);
}
}
else
{
item.RowId = 1;
item.NationalityList = ViewBag.NationalityList;
#Html.Partial("VisitDetailsPartial", item);
}
</tbody>
</table>
On the click of a button, the rows which are defined in asp.net MVC partial view are added to the table.
Button click
$(document).ready(function () {
var tableBody = $('#myDynamicTableDiseases tbody');
var url = '#Url.Action("Add", "Report")';
$('.btnAddRow').click(function () {
$.get(url, function (response) {
tableBody.append(response);
$('#myDynamicTableDiseases tbody tr').each(function (idx) {
$(this).children("td:eq(0)").html(idx + 1);
});
});
});
});
The "Add" action in "Report" control returns the "VisitDetailsPartial" as a new row added to the table.
Below is the VisitDetailsPartial definition.
#model SolutionName.ViewModel.VisitDetailsViewModel
<tr class="">
#using (Html.BeginCollectionItem("item"))
{
<td class="autoGenNumber" style="width: 5px" >
#if (Model == null)
{
var item = new VisitDetailsViewModel
{
NationalityList = ViewBag.NationalityList,
};
#Html.LabelFor(x => item.RowId, item.RowId.ToString(), new { style = "", #class = "autoGenNumber" })
}
else
{
#Html.LabelFor(x => Model.RowId, Model.RowId.ToString(), new { style = "", #class = "autoGenNumber" })
}
</td>
<td class="">
#Html.DropDownListFor(model => model.NationalityId, new SelectList(Model.NationalityList, "Value", "Text", Model.NationalityId), "Select", new { #id = "ddlNationalityList" })
</td>
<td class="">
#Html.TextBox("txtNumberOfVisits", Model.NumberOfVisits, new { id = "txtNumberOfVisits"})
</td>
<td class="">
#Html.TextBoxFor(x => Model.Remarks, new { id = "txtRemarks", Multiline = true})
</td>
}
</tr>
I'm trying to use the CSS below to change the background color in the first column of the dynamically added even table row but the CSS is not being applied.
.table-striped > tbody > tr:nth-of-type(even) td:first-child {
background-color: #e0f0ff;
}
If i apply the same to a table in whose rows are NOT coming from a partial view, the CSS works fine.
Not sure what i'm missing above.
Ok, i got it working by modifying the CSS as below though in my markup above, i cant seem to see why i consider to be column 1 is actually being treated as column 2.
This version works.
.table-striped > tbody > tr:nth-of-type(even) > td:nth-child(2) {
background-color: #e0f0ff;
}
I would like to change the border color and add an icon of the right side to search-tool in the bootstrap-table framework.
Also I would like to align to the other buttons at the top of the table.
My code is:
/* SEARCH TOOL */
.search{
width: 25%;
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
if (this.options.search) {
html = [];
html.push(
'<div class="pull-' + this.options.searchAlign + ' search">',
sprintf('<input class="form-control' +
sprintf(' input-%s', this.options.iconSize) +
'" type="text" placeholder="%s">',
this.options.formatSearch()),
'</div>');
this.$toolbar.append(html.join(''));
$search = this.$toolbar.find('.search input');
$search.off('keyup drop').on('keyup drop', function (event) {
if (that.options.searchOnEnterKey && event.keyCode !== 13) {
return;
}
if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
return;
}
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
if (isIEBrowser()) {
$search.off('mouseup').on('mouseup', function (event) {
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
}
}
It doesn't works. I think that the problem is that the search-tool use an input tag and the class form-control, I do not sure it.
Maybe you are trying to do like this Live Fiddle Here. I also comment out where I add or change. And btw you don't need that script you added in your question. Any Question ask me in comment. Happy coding :)
$(function(){
$(".search").append('<span class="glyphicon glyphicon-search"></span>');
/* add the span inside search div with append box*/
});
.search {
width: 25%;
position: relative;
}
.search span {
position: absolute; /*Set search icon*/
right: 10px;
top: 10px;
}
.search input[type=text]{
border-color: red; /*Set the border color for search box*/
}
.search input[type=text]:focus{
outline:none;
box-shadow:none; /*If you dont need the shadow on click*/
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
</head>
<body>
<table class='table-bordered' id='tableprod' data-toggle='table' data-toolbar='#toolbar' data-show-refresh='true' data-show-toggle='true' data-sort-name='name' data-sort-order='desc' data-show-columns='true' data-pagination='true' data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
<!-- Script CDN's-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
</body>
</html>
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO