i have 2 table in which i can add and delete elements .. elements have 2 date and 1 number field.. So can you give a direction for the easy way to make them editable inline,but they are not only text or number when i click on date it need me to show custom date picker ...But i need to edit only the one date or the number i don't want to edit all the line when i double click it..only that field what i clicked.Thanks :) Btw it is all react directive.
I need something like that
render: function () {
var itemMap = this.state.items.map(function (item, i) {
return (
<tr key={i}>
<td><input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /></td>
This i want to change with inline edit -> <td ><FormattedDate value={item.startDate}/></td>
This i want to change with inline edit -> <td><FormattedDate value={item.endDate}/></td>
This i want to change with inline edit -> <td>{item.workInHours}</td>
<td><label type="button" onClick={this.handleShowModal.bind(this,i)}><img height="30px" src="moliv.jpg"/></label>
</td>
</tr>
);
}.bind(this));
return (
<div>
<button className="btn btn-primary center-block" onClick={this.addElem}>Add</button>
{this.state.list.theList.length > 0 ? <button className="btn btn-primary" onClick={this.putResult}>Put result</button> :null}
<table className="table scroll2">
<thead>
<tr className="danger">
<th><input type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/></th>
<th>Start Date</th>
<th>End Date</th>
<th>Hours</th>
<th></th>
</tr>
</thead>
<tbody>
{itemMap}
</tbody>
</table>
{this.state.items.length > 0 ? <button type="button" className="btn btn-danger" onClick={this.deleteItems}>Remove</button> : null}
<Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/>
</div>
);
Related
I have two grids of text boxes as shown here:
Input Boxes
The goal is that the user would fill out the above boxes and then as they fill out the below boxes, the above boxes auto update. ie if you entered 100 in the first box on the top and then 75 in the first box at the bottom, the first box would change to 25.
I tried to use onchange() but was unsuccessful. v-model seems to cause some problems with its two way binding, which makes sense. Any help is appreciated.
Here is the HTML that populates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>
To start, split up the <td> nodes into child components, and emit their value on input change to the parent (main) component. Then use a method to calculate and set the remaining value for the "other" box child component (saved presumably inside an Array, you need to find the right element inside that Array in that method). The changed array will automatically update the other child component, as it is bound to the prop.
I'm trying to apply pagination to a dynamic table which is created by fetching data from an API.
I've applied pagination while I was creating bootstrap cards from the same data but I don't know how to do this when creating a table.
here is the code on which I want to apply pagination-
render(){
return(
<div className='container'>
<table className='table table-striped'>
<thead>
<tr>
<th>User_Id</th>
<th>User_Name</th>
<th>Email</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_id}</td>
<td>{card.user_name}</td>
<td>{card.email}</td>
<td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
) })}
</tbody>
</table>
</div>
)
}
for now, I have 20 users on the table and I want to show only 5 users per page.
the table looks like this-
You can use react-paginate https://www.npmjs.com/package/react-paginate
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
I am trying to fetch JSON data and create a table using it with table heading.
I've done it successfully but the problem is that the table is not displayed properly.
render(){
return(
<div className='container'>
<table>
<thead>
<tr>
<th>User_Name</th>
<th>Address</th>
<th>Date Of Birth</th>
<th>Email</th>
<th>Profile Picture</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<div>
<tr>
<td>{card.user_name}</td>
<td>{card.address}</td>
<td>{card.date_of_birth}</td>
<td>{card.email}</td>
<td>{card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
</div>
) })}
</tbody>
</table>
and the table looks like this :
https://screenshots.firefox.com/7i07VlkEFYlAj8ga/mrigank.com
I want the table to be properly arranged.
when you are mapping your data and returning it into <tr>, <td> Remove <div> while populating the table, because div can not be the child of table.
Try to remove div element from tbody.
<div> is not allowed as an immediate child of any of the table elements (except <th>, <td> and <caption>) and will automatically be moved outside of the element with all of its content.
Try removing the <div> elements around your <tr> elements.
Add this to the table tag <table style="width:100%"> It will also work.
Or if you want to an absolute table styling use Bootstrap for it so it will be responsive.
Here is the link of tables for bootstrap
Also remove the <div> tag as it is not recommneded for the table body, But it will work fine.
Modified your code for displaying table properly.
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_name}</td>
<td>{card.address}</td>
<td>{card.date_of_birth}</td>
<td>{card.email}</td>
<td>{card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
) })}
</tbody>
I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?
Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.
I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?