How to get values from specified table rows in Meteor.js - javascript

In my Meteor app, I have the following table which shows some info. Users can edit company name, address and email and save the changes by clicking the button beside.
<table class="table table-hover">
<thead>
<tr>
<th>Company Name</th>
<th>Company Address</th>
<th>Email Address</th>
<th>Last Login</th>
<th>Manage</th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr>
<td><input type="text" name="companyName" value="{{companyName}}"></td>
<td><input type="text" name="companyAddress" value="{{companyAddress}}"</td>
<td><input type="text" name="companyEmail" value="{{profile.email}}"></td>
<td>{{date}}</td>
<td>
<input type="submit" class="btn btn-primary save" value="Save">
<input type="submit" class="btn btn-danger delete" value="Delete">
</td>
</tr>
{{/each}}
</tbody>
</table>
In event handler:
'click .save':function(e,inst){
var userID = this._id;
var companyName = inst.$('[name=companyName]').val();
var companyAddress = inst.$('[name=companyAddress]').val();
var companyEmail = inst.$('[name=companyEmail]').val();
console.log(companyName);
console.log(userID);
console.log(companyAddress);
console.log(companyEmail);
}
By doing so, It only can read the values of the first row of table. Then I add data-id in input field <td><input type="text" name="companyName" value="{{companyName}}" data-id="{{_id}}"></td> It is able to get company name from the table row. My question is how to get the rest of attributes.

You need to populate id for all input fields, I generally used to this like this
//in html
<input type="text" name="companyName{{_id}}" value="{{companyName}}">
//in helper
var companyName = inst.$(`[name=companyName${this._id}]`).val();

Related

How to generate a new table row with an onClick event

I have a table with 2 columns and 1 row. I would like it to generate another row with a clean set of inputs when users click the "add new row" button it.
Current HTML table:
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>
<td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br>
</tr>
</tbody>
</table>
<input type="button" value="Add new row">
How it currently looks:
I want the table add another table row when the user clicks the "Add new row" button.
Very easy. You can use insertAdjacentHTML
function addNewRow() {
let tds = document.getElementsByTagName("td");
tds[tds.length - 2].insertAdjacentHTML('afterend', '<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>')
}
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>
<td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br>
</tr>
</tbody>
</table>
<input type="button" value="Add new row" onclick="addNewRow()">
With increasing placeholder:
let i = 1;
function addNewRow() {
i++;
let tds = document.getElementsByTagName("td");
tds[tds.length - 2].insertAdjacentHTML('afterend', `<td><textarea rows="5" cols="1" placeholder="Enter task description here #${i}"></textarea></td>`)
}
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea rows="5" cols="1" placeholder="Enter task description here #1"></textarea></td>
<td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br>
</tr>
</tbody>
</table>
<input type="button" value="Add new row" onclick="addNewRow()">
jQuery solution:
function addNewRow() {
$("td").eq($("td").length - 2).after('<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>');
}
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>
<td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br>
</tr>
</tbody>
</table>
<input type="button" value="Add new row" onclick="addNewRow()">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Would highly recommend you read up on render functions and implement here:
https://gomakethings.com/rendering-content-with-vanilla-javascript/

How to Append(store) data from input field Html to a Json File

I want to save ( store ) some data from HTML input forms to DB.Json file when i click Insert button from html input form !
This is what i have HTML :
<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Birthday</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>
now when i fill all fields on html index and click the insert button need to save these data's on json file
First of all, place your <tr> inside <tbody> (it's always a good practice).
Now about your issue. You can't create a separate DB.json file with javascript, but you can create a JSON object and store values in that.
Then just build your Json Objectby getting balues by every input id
function insert1() {
myJson = {
first_name: $("#datatable").find("#first_name").val(),
last_name: $("#datatable").find("#last_name").val(),
age: $("#datatable").find("#age").val(),
birthday: $("#datatable").find("#birthday").val(),
};
console.log("myJson", myJson);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatable">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Birthday</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>
</tbody>
</table>
you can use axios to write in json file
simply it's an ajax wrapper
axios.post("json file path", jsonObject).then(
res => console.log(res); /// successfully writing in file
);

jQuery delete all table rows except the selected one?

I'm trying to come up with the best way to use jQuery to delete all the rows except for the one selected. I've done some searching and I've seen several posts about deleting all records or all records except the first or last row but nothing on deleting all but the one selected.
The scenario would be searching for a list of employees which would return maybe 5 records. Then there would be a "Select" button and when you click on that button it would remove all <tbody> rows except for that one. Actually from there my idea is to not only remove the rows but then to hide the "Select" button and display a text box as well as displaying a "Add" button below the table to add the employees with the item entered in the textbox.
I've thought about putting a hidden field on each row that has an row #, pass that row index to a jQuery function and then loop through all of the Tbody.Tr and remove if it doesn't match the row index passed in?
Another thought would be to put an Onclick on each of the "Select" buttons and then in the function use "this" to for reference to the row but then I don't know how to effectively say "remove all but $this row".
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.listEmployee)
{
<tr>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button id="btnSelect" class="btn btn-sm">Select</button>
<input id="txtCaseNo" type="text" style="display:none;" />
</td>
</tr>
}
</tbody>
</table>
First ids need to be singular so id="btnSelect" is not going to work. Make it a class or name.
So select the TR and select the siblings and you can remove it.
$("tbody").on("click", "button", function() { //bind the click to the buttons
var button = $(this) //get what was clicked
$(this).closest("tr") //select the TR
.siblings() //get the other TRS
.remove() // um, remove them
button.hide() //hide your button
button.siblings().removeAttr('hidden') //show the input
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-striped table-bordered table-sm">
<thead class="thead-light">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Employee ID</th>
<th>Position Title</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>A#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>B#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>C#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
<tr>
<td>D#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.EmployeeId</td>
<td>#item.PositionTitle</td>
<td>
<button class="btnSelect btn btn-sm">Select</button>
<input name="txtCaseNo" type="text" hidden />
</td>
</tr>
</tbody>
</table>
Why not filter on your Model.listEmployee on the id of the selected row? This is assuming your current set up is reactive.
Ie:
const new_list = old_list.filter(item => item.id !== selected_id)

How to Get Array Object Values from Controls

My problem is more than what my Question title says actually. I have a table in which I can enter values per row and add/delete new rows.
HTML
<div ng-app="ArrayApp">
<div ng-controller="arrayController">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Item No</th>
<th>Product</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Line Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lineItem in lineItems">
<td><input type="checkbox" ng-model="lineItem.selected"/></td>
<td>
<select class="form-control" ng-model="lineItem.item" ng-options="item as item.itemCode for item in items" name="ItemCode" style="width: 100%;">
<option value="0">Select Item</option>
</select>
</td>
<td><input type="text" class="form-control" ng-model="lineItem.item.itemName" required /></td>
<td><input type="number" class="form-control" ng-model="lineItem.quantity" required /></td>
<td><input type="number" class="form-control" ng-model="lineItem.item.unitPrice" required /></td>
<td><span ng-model="lineItem.lineTotal">{{getLineTotal(lineItem)}}</span></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!lineItems.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
the script below holds the function to add new rows, delete rows etc.
Angular
$scope.lineItems = [];
$scope.addNew = function (lineItem) {
$scope.lineItems.push({
'item.itemName': '',
'quantity': 1,
'item.unitPrice': ''
});
//$scope.getTotal();
};
$scope.getTotal = function () {
var total = 0;
for (var i = 0; i < $scope.lineItems.length; i++) {
var lineItem = $scope.lineItems[i];
total += (lineItem.quantity * lineItem['item.unitPrice']);
vm.salesInvoice.totalAmount = total;
}
return total;
}
$scope.getLineTotal = function (lineItem) {
var total = 0;
if (!lineItem['item.unitPrice'])
return total;
var total = lineItem.quantity * lineItem['item.unitPrice'];
return total;
}
Now what I am trying to achieve here is this;
I am fetching data from database into vm.items from server and pulling the data into a dropdownlist inside ng-repeat. I want that when I select an item from the dropdown, a corresponding item value will display on the controls of ng-model (lineItem.item.itemName) and lineItem.item.unitPrice inside the table row. This works pretty well with the code displayed here. But the problem here is the displayed values for lineItem.item.itemName and lineItem.item.unitPrice are not captured against their keys in the $scope.lineItems array object. (the values are empty when I debug) To the best of my knowledge I am not seeing anything wrong here. Please I need help.
See Fiddle to throw more light on the question. Please help create a sample JSON array for vm.items to see how it works clearly.

I need each row of the table is separate and can be clickable and view some information. It is possible to be hundreds of rows entered by the users

//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row

Categories