Dynamically generated table rows with html input controls disappears on Postback - javascript

I dynamically generated a table rows with html input controls using jquery.
The problem is that when there is a postback they disappear.
How do I make them stay?
Html:
#Html.HiddenFor(x => x.Attribute_Count)
<table id="attribute" class="list">
<thead>
<tr>
<td class="left">Name</td>
<td class="right">Sort Order</td>
<td></td>
</tr>
</thead>
<tbody id="attribute-row">
<tr>
<td class="left">
#Html.TextBoxFor(x => x.AttributeName)
<div class="validation-area">
#Html.ValidationMessageFor(x => x.AttributeName)
</div>
</td>
<td class="right">#Html.TextBoxFor(x => x.Attribute_SortOrder)</td>
<td class="left"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="left"><a onclick="addattribute();" class="button">+</a></td>
</tr>
</tfoot>
</table>
JQuery:
var attribute_row = 1; function addattribute(){html = '<tbody id="attribute-row' + attribute_row + '">';html += ' <tr>';html += ' <td class="left">#Html.TextBoxFor(x=>x.AttributeName)<div class="validation-area">#Html.ValidationMessageFor(x => x.AttributeName)</div></td>';html += ' <td class="right"><input type="text" name="Attribute_SortOrder" id="Attribute_SortOrder"></td>';html += ' <td class="left"><a onclick="$(\'#attribute-row' + attribute_row + '\').remove();" class="button">-</a></td>';html += ' </tr>';html += '</tbody>';$('#attribute tfoot').before(html);attribute_row++;$('#Attribute_Count').val(attribute_row);}


I solved the problem.
#for (var i = 0; i < Model.Attribute_Count; ++i)
{
<tbody id="attribute-row">
<tr>
<td class="left">
#Html.TextBoxFor(x => x.AttributeName[i])
<div class="validation-area">
#Html.ValidationMessageFor(x => x.AttributeName[i])
</div>
</td>
<td class="right">#Html.TextBoxFor(x => x.Attribute_SortOrder[i])</td>
<td class="left"><a onclick="$('#attribute-row' + i).remove();" class="button">-</a></td>
</tr>
</tbody>
}
Thanks

Related

how to sort table column using select tag <select>?

i'm trying to sort the columns in the table . i was able to sort the table column by clicking on the table header ( using this $('th').click(function(){ ) but i want to sort the table column using the select options but i was unable to do so .
i'm using a class sort-item in the select option and then and using that sort-item class in the jquery but it is not working ...
can you please help me out ?
$('sort-item').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group ">
<div class="sort">Sort : </div>
<select class="sort">
<option value="0">All</option>
<option class="sort-item" value="1">Received</option>
<option class="sort-item" value="2">Due</option>
</select>
</div>
<div class="table zui-wrapper table-responsive " >
<div class="zui-scroller ">
<table id="indextable"
class="zui-table table "
>
<thead>
<tr>
<th scope="col" class="zui-sticky-col">Name</th>
<th scope="col">id</th>
<th scope="col">Complexity</th>
<th scope="col">Received</th>
<th scope="col">Language</th>
<th scope="col">Status</th>
<th scope="col" class="float-right">Due </th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">
<a>
A</a>
</td>
<td><a>123456789</a></td>
<td><a>Medium</a></td>
<td><a>01/01/20</a></td>
<td><a>French</a></td>
<td><a>Designed By A</a>
</td>
<td ><a>1/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col">
<a >B</a>
</td>
<td><a>12345678</a></td>
<td><a>Medium</a></td>
<td><a>02/05/20</a></td>
<td><a>French</a></td>
<td><a>Designed By j</a></td>
<td>
<a>2/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a>C</a>
</td>
<td><a>1234567</a></td>
<td><a>Medium</a></td>
<td><a>02/02/20</a></td>
<td><a>French</a></td>
<td><a>Designed By j</a></td>
<td>
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col">
<a>D</a>
</td>
<td><a>123456</a></td>
<td><a>Medium</a></td>
<td><a>03/03/20</a></td>
<td><a>French</a></td>
<td><a>Designed by G</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col ">
<a>E</a>
</td>
<td><a >12345</a></td>
<td><a >Medium</a></td>
<td><a>04/04/20</a></td>
<td><a>French</a></td>
<td><a>Designed by E</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col ">
<a>F</a>
</td>
<td><a>1234</a></td>
<td><a>Medium</a></td>
<td><a>05/05/20</a></td>
<td><a>French</a></td>
<td><a >Designed by F</a></td>
<td >
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a >G</a>
</td>
<td><a>123</a></td>
<td><a>Medium</a></td>
<td><a>06/06/20</a></td>
<td><a>French</a></td>
<td><a>Designed by D</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col ">
<a>H</a>
</td>
<td><a >12</a></td>
<td><a >Medium</a></td>
<td><a >07/07/20</a></td>
<td><a>French</a></td>
<td><a>Designed by B</a></td>
<td >
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a >I</a>
</td>
<td><a >1</a></td>
<td><a >Medium</a></td>
<td><a >08/08/20</a></td>
<td><a >French</a></td>
<td><a >Designed by C</a></td>
<td style="float: right">
<a>12/05/20</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Is this possible to use
$(".sort").change(function (){
});

How do I link user input function with the table in HTML?

I created a Shopping List table with two sections(Grocery Name and Price) in my browser and I have a field for the user to input the name of the grocery. I want, every time when the user enters an item in the field and presses the "ADD" button or enter, for the item to be placed into the table section.
var groceries = []
document.querySelector('#addGroceryForm').addEventListener('submit', addGrocery)
function addGrocery(event) {
event.preventDefault() //stop the form submission(re-loading the page)
var groceryInput = document.querySelector('#groceryInput')
groceries.push(groceryInput.value)
//Add the new column to the table;
groceryInput.value = ''
updateGroceries()
}
function updateGroceries() {
var groceriesElement = document.querySelector('#groceries')
groceriesElement.innerHTML = ''
for (var currentIndex = 0; currentIndex < groceries.length; currentIndex++) {
var grocery = groceries[currentIndex]
groceriesElement.innerHTML += '<li>' + grocery + '</li>'
}
}
<form id="addGroceryForm" method='post'>
<input id='groceryInput' type='text' placeholder="Enter Food">
<button type='submit'>ADD</button>
</form>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-left">Price</th>
</tr>
</thead>
<tbody class=groceries>
<tr>
<td></td>
<td class="groceryInput"></td>
</tr>
<tr>
<td class="text-left" id='leftOne'> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
</tbody>
</table>

Dynamic Rowspan creation for HTML Table

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.
your help is much appreciated.
Here is my JSON format
{"nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
Here is what I am trying to achieve
table look
HTML
<table>
<tbody>
<tr class="odd">
<td rowspan="7">All</td>
<td rowspan="6">Incident Management</td>
<td rowspan="6">Global</td>
<td rowspan="2">Bangalore</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Frimley</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Palo Alto</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="1">Service Availability</td>
<td rowspan="1">Global</td>
<td rowspan="1">N/A</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>

Though one.
var data = {"data":"Start","nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
function getNodeCount(obj){
var num = 0
if(obj.nodes){
for(var i=0;i<obj.nodes.length;i++){
num += getNodeCount(obj.nodes[i])
}
}else
num = 1
return num
}
function createRowHTML(data,html){
if(html==null) html = '<tr>'
html += '<td rowspan="'+getNodeCount(data)+'">'+data.data+'</td>'
if(data.nodes){
for(var i=0;i<data.nodes.length;i++){
if(i==0)
html += createRowHTML(data.nodes[i],'')
else
html += createRowHTML(data.nodes[i])
}
}else
html += '</tr>'
return html
}
var html = createRowHTML(data)
document.getElementById('result').innerHTML = '<table>'+html+'</table>'
table td{
border: solid 1px black;
}
<div id="result"></div>

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap
i have a code that is returning only the first header cell name the script code is as bellow
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert("header=" + rowheader.innerHTML);
});
HTML is as bellow
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4" class="displaysingledata>row1</td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2" class="displaysingledata"></td>
<td id="1_3"></td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7" class="displaysingledata"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10" class="displaysingledata">row2</td>
<td id="2_0"></td>
<td id="2_1" class="displaysingledata"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displayMultipledata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells

You can use the colspan to define the number of headers you'll need.
Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan = $(this).attr('colspan'),
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Alternativ that works on all cells
$('#example').on('click', 'td:not(:first-of-type)', function (e) {
var colspan = 1,
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
if( $(this).attr('colspan') ) {
colspan = $(this).attr('colspan');
}
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan_number = parseInt($(this).attr('colspan'));
var prevCells = $(this).prevAll();
var previousColSpan = 0;
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
previousColSpan += (parseInt($(this).attr('colspan'))-1);
}
});
var total_cells = 1;
if(parseInt(colspan_number)>0){
total_cells = colspan_number;
}
var rowheaders = '';
for(var i=0;i<total_cells;i++){
rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
}
alert("headers : \n" + rowheaders);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

How can I get the relative header of a cell?

I have a very unusual table. I am struggling to be able to return the relative header of a specific element, as per this http://jsfiddle.net/yh6C6/
The table structure is similar to the following:
<table border>
<tbody>
<tr>
<th></th>
<th></th>
<th colspan="3">Parameter 1</th>
<th colspan="2">Parameter 2</th>
</tr>
<tr>
<td></td>
<td></td>
<td>
<div>
<div>State 1.1</div>
</div>
</td>
<td>
<div>
<div>State 1.2</div>
</div>
</td>
<td>
<div>
<div>State 1.3</div>
</div>
</td>
<td>
<div>
<div>State 2.1</div>
</div>
</td>
<td>
<div>
<div>State 2.2</div>
</div>
</td>
</tr>
<tr>
<th rowspan="2">Parameter 2</th>
<td>State 2.1</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 2.2</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<th rowspan="3">Parameter 3</th>
<td>State 3.1</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 3.2</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 3.3</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
</tbody>
</table>
Assuming you click on the 'contenteditable' cells, how can I return the row and column headers? Please check the jsfiddle provided above.

I've edited the fiddle to get the horizontal parameter.
Needed to add a class to each tr that contained a parameter name. Also coloured the selected tr to make it easier to visualize and debug what is being selected. Getting the vertical parameter name will be a different problem.

I was able to get it by doing the following:
$(document).ready(function () {
$('table').on('click', 'td[contenteditable]', function (e) {
// Horizontal Parameter
if ($(this).parent().has('th').length > 0) {
hParameter = $(this).parent().find('th').text();
} else {
hParameter = $(this).parent().prevAll('tr').has('th').first().find('th').text();
}
$('#horizontal-parameter').text('H: ' + hParameter);
// Vertical Parameter
var thLocator = [],
colCount = 1;
$table = $('table');
$table.find('tr:first th').each(function () {
for (var i = 0; i < this.colSpan; i++) {
thLocator.push(colCount);
}
colCount++;
});
vParameter = $table.find('tr:first th:nth-child(' + thLocator[$(this).index()] + ')').text();
$('#vertical-parameter').text('V: ' + vParameter);
});
});

Categories