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
Related
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>
I'm trying to export a painted html table completely dynamically into a csv file. I tried to implement several Scripts, functions.etc but I have not obtained the desired result. If anyone can help me, I'd be very grateful.
The information in the table is loading from a Request in "jsonData", It is important to clarify that I do not require to know the "Headers", only the information inside the table body:
ts Code:
jsonData:any;
_object = Object;
"jsonData" looks like:
[{
Subject_ID: "ACCT101",
First_Available_Date: "01/01/01",
....
},
{
Subject_ID: "510862185-X",
First_Available_Date: "06/04/19"..}....
]
HTML
<table>
<thead>
<tr>
<th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of jsonData; let i = index">
<td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td>
</tr>
</tbody>
</table>
<button class="btn btn-submit btn-sm float-right" type="submit" (click)="export()">
Submit
</button>
Please try below code. this will extract data from table and download as csv.
<!DOCTYPE html>
<html>
<head>
<style>
td, table,th{
border: solid 1px black;
}
</style>
</head>
<body>
<table id="data_table">
<thead>
<tr>
<th>Subject_ID</th>
<th>First_Available_Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT101</td>
<td>01/01/01</td>
</tr>
<tr>
<td>510862185-X</td>
<td>06/04/19</td>
</tr>
<tr>
<td>New data</td>
<td>New data 1</td>
</tr>
</tbody>
</table>
<script>
function exportit() {
var csv='';
table=document.getElementById("data_table");
tr=table.children[0].children[0];
for(i=0;i<tr.children.length;i++)
{
csv+=tr.children[i].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
tbody=table.children[1];
for(i=0;i<tbody.children.length;i++)
{
for(j=0;j<tbody.children[i].children.length;j++)
{
csv+=tbody.children[i].children[j].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
}
csv=csv.substring(0,csv.length-1)+"\n";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'data.csv';
hiddenElement.click();
}
</script><br>
<button onclick="exportit()">export</button>
</body>
</html>
I have a modal react component that renders a table that iterates through an array of users/emails (waitList) and displays them in a tag. My goal is to only remove the first border-top attribute in the row (see image).
Here's a snippet of my component in case my description wasn't clear-
renderTableRows() {
const iter = [];
if (this.props.waitList !== null) {
this.props.waitList.map(applicant => {
iter.push(
<tr>
<td>{applicant.user.name}</td>
<td>{applicant.user.email}</td>
</tr>
);
});
}
return iter;
}
render() {
return (
<div>
<Modal show={this.state.waitListModalIsOpen}>
<Modal.Header>
WAIT LIST ({this.props.waitListCount})
</ Modal.Header>
<Modal.Body>
<table className={'table wait-list-table'}>
<tbody>
{this.renderTableRows()}
</tbody>
</table>
</ Modal.Body>
<Modal.Footer>
<Button onClick={() => { this.closeWaitListModal(); }}>Cancel</Button>
</ Modal.Footer>
</Modal>
</div>
);
}
}
I understand that because I am iterating each td here that nth-child will remove all borders for the supplied child parameter, rather than just the first in the list. Is there a way I can hide this border using CSS? If not, recommendations for how to improve my iteration logic in my React component is welcomed.
table tr td {border-top: solid gray 1px; }
table tr:first-child td {border-top: none;}
<table>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</tbody>
</table>
You could do something along the lines of this:
JS:
renderTableRows() {
const iter = [];
if (this.props.waitList !== null) {
this.props.waitList.map((applicant, index) => {
iter.push(
<tr>
<td className={index === 0 ? "no-border-top" : ""}>
{applicant.user.name}
</td>
<td>{applicant.user.email}</td>
</tr>
);
});
}
return iter;
}
CSS:
.no-border-top {
border-top: none;
}
You can also use inline styling like so:
renderTableRows() {
const iter = [];
const noBorderTopStyle = {
borderTop: "none"
}
if (this.props.waitList !== null) {
this.props.waitList.map((applicant, index) => {
iter.push(
<tr>
<td style={index === 0 ? noBorderTopStyle : null}>
{applicant.user.name}
</td>
<td>{applicant.user.email}</td>
</tr>
);
});
}
return iter;
}
Use first-child selector on your tr as follows:
tbody tr:first-child td{
border-top:0;
}
Ok, the title may sound a bit easy or common but my problem is not that easier. I'm working on making a HTML page that displays a database in table rows. A sample code is:
<table>
<tr><td>ABC Hospitals</td></tr>
<tr><td>India</td><td>Contact:9999999999</td></tr>
</table>
<table>
<tr><td>XYZ Blood Bank</td></tr>
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr>
</table>
<table>
<tr><td>ABC Inn</td></tr>
<tr><td>California</td><td>Contact:7777777777</td></tr>
</table>
I have used tables to group data, with each one containing rows to display data. The code gives the following output sample, with the CSS effects added:
Image1 - Sorry, I'm a new user and StackOverflow doesn't allow me to post images.
I'm now in requirement of a 'Find in page' box to search the HTML document for a specific piece of information(say "ABC"). The search must display ONLY the table(s) that contains the query term("ABC"), in our case, hiding ALL other tables which do not contain the search term. I have achieved the sample output by manually editing the HTML, just to more clearly show my requirement. I'm in need of the JScript(or any appropriate) code to achieve the result:
Image2 - Sorry again.
I'm sure somebody here will be able to help me, either provide me some code piece or guiding me to some useful link. Thanks in advance.
-Sriram
var search = document.querySelector('#search');
var database = document.querySelector('#database');
search.addEventListener('input', function (e) {
// Every time the input changes, execute filterMatching.
filterMatching(search.value, database);
});
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
.hidden {
display: none;
}
<input type="text" id="search" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
Never mind, for some reason, the thing doesn't work when the element are stored as 'var' types. So I modified the code slightly as follows: I created a new function:
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
and called
<input type="text" id="search" oninput="fn_search()" />
The program now works fine.
The complete code is below:
<html>
<head>
<style>
table{
padding: 20px;
margin: 10px;
background: #990030;
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #9ff;
border-radius: 10px;
box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
table-layout: fixed;
width: 325px;
height:75px;
}
th, td {
overflow: hidden;
width: 100px;
}
table.hidden {
display: none;
}
</style>
</head>
<body>
<script>
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
</script>
<input type="text" id="search" oninput="fn_search()" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
</body>
</html>
I want to highlight a table cell (td) instead of the entire row when a particular row is clicked.
This code below highlights a row in yellow. I would like to highlight the Name column when the row is selected instead.
$(function() {
Thing = function(id, name, selected) {
var self = this;
self.ID = id,
self.Name = name,
self.isSelected = ko.computed(function() {
return selected() === self;
});
};
function viewModel() {
var self = this;
self.model = {};
self.model.CurrentDisplayThing = ko.observable();
self.model.Things = ko.observableArray(
[
new Thing(1, "Thing 1", self.model.CurrentDisplayThing),
new Thing(2, "Thing 2", self.model.CurrentDisplayThing),
new Thing(3, "Thing 3", self.model.CurrentDisplayThing)
]);
self.selectThing = function(item) {
self.model.CurrentDisplayThing(item);
};
}
ko.applyBindings(new viewModel());
});
JS Fiddle Demo
Just move your css data-binding to the td level instead of the tr level:
Demo JS Fiddle
Your old code:
<tr data-bind="click: $root.selectThing, css: { selected: isSelected } ">
<td data-bind="text: ID"></td>
<td data-bind="text: Name"></td>
</tr>
Becomes:
<tr data-bind="click: $root.selectThing ">
<td data-bind="text: ID"></td>
<td data-bind="text: Name, css: { selected: isSelected }"></td>
</tr>
Also runs in Stack Snippet below with latest version of Knockout, so it doesn't appear to be a versioning issue based on your comment.
$(function() {
Thing = function(id, name, selected) {
var self = this;
self.ID = id,
self.Name = name,
self.isSelected = ko.computed(function() {
return selected() === self;
});
};
function viewModel() {
var self = this;
self.model = {};
self.model.CurrentDisplayThing = ko.observable();
self.model.Things = ko.observableArray(
[
new Thing(1, "Thing 1", self.model.CurrentDisplayThing),
new Thing(2, "Thing 2", self.model.CurrentDisplayThing),
new Thing(3, "Thing 3", self.model.CurrentDisplayThing)
]);
self.selectThing = function(item) {
self.model.CurrentDisplayThing(item);
};
}
ko.applyBindings(new viewModel());
});
.selected { background-color: yellow; }
thead tr {
border:1px solid black;
background:lightgray;
}tbody tr {
border:1px solid black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="if:model.CurrentDisplayThing">
Display: <span data-bind="text: model.CurrentDisplayThing().ID"></span>
</div>
<table class="defaultGrid">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: model.Things">
<tr data-bind="click: $root.selectThing ">
<td data-bind="text: ID"></td>
<td data-bind="text: Name, css: { selected: isSelected}"></td>
</tr>
</tbody>
</table>
Try this:
CSS
tbody tr.selected > td:last-child{
background-color: yellow;
}
JSFIDDLE
Try the following code, it works.
<table id="tableID" border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody >
<tr >
<td >1</td>
<td >2</td>
</tr>
</tbody>
</table>
javaScript:
var table = document.getElementById("tableID");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
this.style.backgroundColor = "yellow";
};
}
}
Maybe the follwing code can help you:
$("table > thead > tr > th").css({"background":"#D3D3D3"});
$("table > thead > tr :nth-child("+($(this).index() + 1) +")").css({"background":"RED"});