Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. I have included two templates with two different parent ids into one html template. I need to write the script in such a way that when add-btn having parentid == "#a" is clicked ,append rows to table having parentid =="#a".
result.html
//i am using django web framework
<div class="reports">
{% include 'template1.html' with id="a" %}
{% include 'template2.html' with id="b" %}
</div>
Each template shares/extends a base.html template where all the common code is written
<div class="panel">
<div>
<button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
<i class="fa fa-plus"></i>
Add
</button>
</div>
<div class ="configuration-table panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Remove</th>
<th>Layer</th>
<th>Display</th>
<th>Unit</th>
<th>Dataset</th>
<th>Ordering</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
and my jquery code is
result.js
$('.reports').on('click','#a .add, #b .add', function(e) {
//how to differentiate two tables here.
$(this).find('configuration-table table').children('tbody')
.append(
'<tr>'+
'<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
'<td>'+layer_text+'</td>'+
map_elements+
'<td>'+unit_text+'</td>'+
'<td>'+dataset_text+'</td>'+
'<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
'</tr>'
);
Issue: When i click add button, the row is appending to both the tables. and i dont want that. i want to add rows to the respective table. And i want to do that within same function.
I am looking for logic that i am missing here.
Thanks in advance
Your code is using find which looks for a child of the button. It is not a child, it is a sibling of the parent div of the button.
$(this) //button that was clicked
.parent() //div around the button
.sibling(".configuration-table") //sibling element that has the table
.find("table tbody") //the table
.append(tableRow);
Firstly as per markup, there is no parent child relation between add button and table. Though, there can be many ways of fixing this issue. Proposing 1 option below
Let us say you have both buttons with class add and a data attribute (data-id) containing id of table.
i.e. 1st button having data-id="a" and second button having data-id="b" where a and b are the ids of respective tables.
Now update your js to following
.on('click','.add', function(e) {
var table_id = $(this).data("id");
$("#"+table_id).children('tbody').append..... // your code
}
Related
I'm trying to replace the text and css of the 3rd column of a certain table row,
I have unique id from button on each row..
Iv'ed seen some doing this $('#feedbacks tr:nth-child(3) td')
here's a row from my table
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">awdawd</td>
<td>awdawd#dawd.com</td>
<td>
<span class="text-success">Opened</span>
</td>
<td>04:16PM Wednesday - 21st Aug 2019</td>
<td class=" text-center">
<button type="button" rel="tooltip" title="view" class="btn btn-simple btn-info btn-icon view" id="77">
<i class="material-icons">pageview</i>
</button>
</td>
</tr>
Assume that on click each tr view button you want to change 3rd td span class and text. Then do as follows -
$(document).on('click', '.view', function(){
$(this).parents('tr').find('td:nth-child(3) span').text("Unread").removeClass("text-success").addClass("text-error");
});
In this case, you can change the text by using Jquery like below.
are you changing your table content on every row's button click? then
$('.view').on('click',function(){
$(this).parents('tr').find('span').html('changed Text').css('color','#fdcc');
});
or like this
$("td:nth-child(3)").css("background-color", "yellow");
try this selector.
tr td:nth-child(3)
Better to have a unique ID for the table
mytable tr td:nth-child(3)
A table is rendered with rows based on the values inside the array 'results'. There is a dropdown present in each of the row, which is populated via an array 'statuses'.
<div id="app">
<table>
<tr v-for="(row,index) of results">
<td>{{index}}</td>
<td>{{row.name}}</td>
<td>
<div :id="row.id"
class="ui selection dropdown status_dropdown">
<i class="dropdown icon"></i>
<div class="text">{{row.status}}</div>
<div class="menu">
<div class="item" v-for="status of statuses"
:data-index="index">
{{status.status}}
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
Following is change dropdown function, which basically removes the row if the selected text in dropdown is "Delete":
$('.status_dropdown').dropdown({
onChange: function(value, text, $choice) {
let temp_index = $($choice).attr("data-index");
if(text === "Delete"){
vm.results.splice(temp_index,1);
}
}
});
Here's a codepen with complete code: https://codepen.io/anon/pen/KxzZOB
Now, if the status is changed to "Delete", although the row gets removed, the value of dropdown "Delete" is getting retained on that row.
To reproduce in the codepen sample, change the first row's status (index 0) to "Delete". You'll see that status for "Doe" appears as "Delete".
Also, if any of the dropdown value is changed. And some other row's dropdown value is changed, the previous row for which the status was changed retains the value.
To reproduce in the codepen sample, reload the page. Now, change the status for third row (index 2) to "Active". Now delete the second row (index 1) by selecting "Delete". You'll see last row retaining the value "Active".
Can someone help me out with this issue?
To resolve this issue, you can define the key. see below:
<div id="app">
<table>
<tr v-for="(row,index) of results">
<td>{{index}}</td>
<td>{{row.name}}</td>
<td>
<div :id="row.id"
:key="row.id"
class="ui selection dropdown status_dropdown">
<i class="dropdown icon"></i>
<div class="text">{{row.status}}</div>
<div class="menu">
<div class="item" v-for="status of statuses"
:data-index="index">
{{status.status}}
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
Defining the key should maintain the dom item instance while it moves within the table.
I'm using backbone, jquery and handlebars on my project.
I'm trying to change row class just on click.
I mean if I click edit button (right of the table), it changes the class.
Look the table screenshot to understand.
AdminTableView.js
var addAdminPanelView = Backbone.View.extend({
el:$(".page"),
events:{
'click #editButton':'editEvent',
'click #deleteButton':'deleteEvent'
},
editEvent:function(){
console.log("edit");
this.$el.children().find("th").addClass("info");
},
My template
<tbody id="myTable">
<tr class="active">
{{#travels}}
<th>{{user.department.departmentName}}</th>
<th>{{user.managerID}}</th>
<th>{{user.firstName}} {{user.lastName}}</th>
<th>Seyahat Başlangıcı</th>
<th>Seyahat Sonu</th>
<th>{{location}}</th>
<th>{{travelPurpose}}</th>
<th>{{travelCost}}</th>
<th>{{projectCode}}</th>
<th> <a href="/#travel">
<span id="deleteButton" class="glyphicon glyphicon-minus-sign"></span>
</a>
<a href="#">
<span id="editButton" class="glyphicon glyphicon-edit"></span>
</a>
</th>
{{/travels}}
</tr>
</tbody>
If I click any edit button, all rows have added class "info"
Seems like the event if fired on the "edit" button click.
But you have to know on which row.
The use of .target as in "event.target" may help to find the parent row.
Try this:
editEvent:function(e){
console.log("edit");
$(e.target).closest("tr").addClass("info");
},
Try this one $( "editButton" ).parent( ".active" ).addClass( "yourClass" ); or this
$( "editButton" ).parent( "tr" ).addClass( "yourClass" );
I hope it'll work
Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. In the back end i want to collect all the row elements when "button" is clicked and POST to other page.
<div class="report">
<div class="panel">
<div>
<button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
<i class="fa fa-plus"></i>
Add
</button>
</div>
<div class ="configuration-table panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Remove</th>
<th>Layer</th>
<th>Display</th>
<th>Unit</th>
<th>Dataset</th>
<th>Ordering</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class = "done">
<input class="btn btn-success" formaction="{% url 'something' %}" formmethod="post" type="submit" value="Done"></input>
</div>
</div>
and here is reports.js
var arr = [];
$('.report')
.on('click','.add', function(){
$(this)
.parents('.report')
.find('.configuration-table tbody')
.append(
'<tr>'+
'<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
'<td>'+layer_text+'</td>'+
map_elements+
'<td>'+unit_text+'</td>'+
'<td>'+dataset_text+'</td>'+
'<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
'</tr>'
)
.on('click','.remove-row',function() {
$(this).parents('tr').remove();
})
.sortable({
helper: script
})
.disableSelection();
.on('submit','.done form',function(){
//do domething to collect columns
$('.configuration-table tbody').each(function(){
arr.push({
column.name: column.value
});
});
})
Here as you can see that table rows can be removed/sortable. Dont worry about POST method now. I just need the logic to collect columns from the table after done button is clicked.
Assume script is correct in terms of class names and traversal-filters. I just need the logic to collect column elements and push to "arr".
Thanks in advance
Firstly, you need to loop over the th elements within the thead to get the column names, then the tr in the tbody to get the values. You can get the text() properties from each respective td to fill object. Try this:
.on('submit','.done form',function() {
var arr = [];
var $table = $('.configuration-table');
var columnNames = $table.find('thead th').map(function() {
return $(this).text();
});
$table.find('tbody tr').each(function(){
var rowValues = {};
$(this).find('td').each(function(i) {
rowValues[columnNames[i]] = $(this).text();
});
arr.push(rowValues);
});
});
Example fiddle
I want to restrict the displaying the records of table.
I can able to restrict the table rows with style property of row.But when I am using that style it is giving the UI problems like on mouse over is missing for entire row.
Now mouse over should be there in this table on every table record.
I am using below code.
<tr style="display: block;"></tr>
Is there any way to hide the rows other than the above code.
I want to restrict the table row with out using the style property.
<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>
<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>
JS
$(document).ready(function() {
$(".myrow").hide();
});