In the below code i have dynamic table with dynamic colmnns.I can able to generate table now i want to add new row .As this dynamic table has dynamic id's for each textbox/dropdown/checkbox of the table.So when i click new row it also have dynamic id for each textbox/dropdown/checkbox.Pls help me to do this.
function LoadTableFields(sFieldID, Name, newdiv, FieldValue, TableValues) {
var TblValues = JSON.parse(TableValues);
var tHTML = '';
tHTML += '<table class="table table-bordered table-striped" id="table_' + sFieldID + '" name="' + Name + '"><thead><tr >';
var headers = [];
$.each(TblValues, function(i, item) {
if (headers.indexOf(item.Name) === -1) {
headers.push(item.Name);
tHTML += '<th class="text-center">' + item.Name + '</th>';
}
});
tHTML += '</tr></thead><tbody><tr id="row_0" data-id="0">';
var Count = 0;
$.each(TblValues, function(i, item) {
if (item.FieldType == 'TextBox') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + i + ' name=' + item.Name + i + ' placeholder=' + item.Name + ' class="form-control" value=' + item.FieldValue + ' /></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'DropDownList') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
var options = LoadTableFieldEnums(sFieldID, item.Name, item.FieldValue);
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><select id=' + item.Name + i + ' name=' + item.Name + i + ' class="form-control">' + options + '</select></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'CheckBox') {
tHTML += '<td data-name=' + item.Name + '><input type="checkbox" id=' + item.Name + i + ' name=' + item.Name + i + '/></td>';
} else if (item.FieldType == 'Date') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><div class="input-group date"><input type="text" class="form-control" id=' + item.Name + '0' + ' name=' + item.Name + '0' + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
Count = i;
} else {
tHTML += '<td data-name=' + item.Name + '></td>';
}
});
tHTML += '</tr></tbody></table>';
tHTML += '<a id="add_row_' + sFieldID + '" class="btn btn-default pull-left" onclick="AddNewTableRow(' + sFieldID + ');">Add Row</a><a id="delete_row_' + sFieldID + '" class="pull-right btn btn-default" onclick="DeleteTableRow(' + sFieldID + ');">Delete Row</a>';
newdiv.innerHTML += tHTML;
$('#divComplete').append(newdiv);
}
function AddNewTableRow(sFieldID) {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "row_" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#table_" + sFieldID + " tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
// Date control
if ($(children[0]).prop('tagName') == 'DIV') {
var strname = $(cur_td).data("name");
var c = $('<div class="input-group date"><input type="text" class="form-control" id=' + strname + '' + newid + ' name=' + strname + '' + newid + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div>');
c.appendTo($(td));
} else {
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.attr("id", $(cur_td).data("name") + newid);
c.appendTo($(td));
}
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#table_' + sFieldID + ' tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#table_' + sFieldID));
}
function DeleteTableRow(sFieldID) {
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
if (newid != 0) {
$("#row_" + (newid)).remove();
}
}
Related
I am implementing table based on JSON DATA. SO now I am able print table but I am not able to implement column heading.
http://jsfiddle.net/varunPes/0n9fmawb/74/
var data = {
"managment":
{
"Notice":{
"Red color" :{"delete":true,"enable":true,"view":true} ,
"Yellow color":{"delete":true,"enable":true,"view":true},
"Specail color":{"delete":true,"enable":true,"view":true},
},
"Black Notice":{"delete":true,"enable":true,"view":true},
},
"Faculty":
{
"salary":{"delete":true,"enable":true,"view":true},
},
};
var zoneHtml = '';
for (var zoneKey in data) {
zoneHtml += '<div class="zone" style="border-bottom:1px solid #696768">';
zoneHtml += ('<div class="row"><div class="col-sm-3" style="font-size:21px;">' + zoneKey + '</div><div class="col-sm-6">PORTAL</div></div>');
var jsonData = data[zoneKey];
for (var listUI in jsonData) {
zoneHtml += '<div class="jsonData">';
zoneHtml += ('<h2>' + listUI + '</h2>');
var ports = jsonData[listUI];
zoneHtml += '<ul class="port">';
for (var port in ports) {
if (typeof ports[port] === 'object') {
zoneHtml += '<div class="row">'
zoneHtml += '<div class="col-sm-12">' + port + ':';
for (var i in ports[port]) {
zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="' + i + '" ' + (ports[port][i] ? " checked " : "") + ' ></li>';
}
zoneHtml += '</div></div>';
} else {
zoneHtml += '<li class="checkBoxProp"><input type="checkbox" id="' + i + '" ' + (ports[port] ? " checked " : "") + ' ></li>';
}
}
zoneHtml += '</ul>';
zoneHtml += '</div>';
}
zoneHtml += ('</div>');
}
$("#zone").html(zoneHtml);
.jsonData{
margin-left:5%;
}
li
{
display:inline;
}
.checkBoxProp{
margin-left:4%;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="zone"></div>
Expacted Output should be like below screen shot:
I am making dropdown item selected true dynamically using below lines of code
for(var i in data) {
var book_id = data[i]['book_id'];
var indivudvalbookdetails = data[i]['indivudvalbookdetails'];
var id=1;
for(var j in indivudvalbookdetails) {
if(indivudvalbookdetails[j]['status'] == undefined || indivudvalbookdetails[j]['status'] == "")
{
$('.library_info_tbl tbody').append('<tr>' +
'<td class="text-center centeralign"> ' + data[i]['subject'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['title'] + ' </td>' +
'<td class="text-center centeralign"> ' + data[i]['isbn'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['author'] + ' </td>' +
'<td class="text-center centeralign"> ' + indivudvalbookdetails[j]['acquisitionno'] + '</td>' +
'<td class="text-center centeralign"><div class="btn-group">' +
'<input type="text" class="hide" id="acquisitionno' + id + '" value="' + indivudvalbookdetails[j]['acquisitionno'] + '" class="form-control">' +
'<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>'+
'<option value="Damaged"' +
indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="true"': 'selected="false">Damaged</option>'+
'<option value="Lost"' +
indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="true"' : ' selected="false">Lost</option>' +
'</select>'+
//'<input type="text" id="status' + id + '" class="form-control">' +
'</div></td>' +
'</tr>');
id++;
}
}
It is displaying the code in html like:
"selected="false">Lost selected="false">Lost
selected="false">Lost selected="false">Lost selected="false">Lost"
The string termination is not right and the if condition as well.
Check the code below:
var id = 'select';
var indivudvalbookdetails = [{
status: 'Damaged'
}]
var j = 0;
var select = '<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>' +
'<option value="Damaged"' +
(indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="selected"' : '') + '>Damaged</option>' +
'<option value="Lost"' +
(indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="selected"' : '') + '>Lost</option>' +
'</select>'
document.getElementById('main').innerHTML = select;
<div id="main"></div>
I am trying to insert the statement If else with a for condition into a variable. I don't really know how to handle it.
Here is my original function:
var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
chaine = families[familyName].map(function(variants) {
return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
})
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div><div class="btn-accordion"></div><div class="box-sub-fonts">'+ chaine.join('') +'</div>';
}).join('') + '</div>';
I'd like the chain to return when there are more than 1 variant in the font family. What I tried goes directly with else. Here is the code:
var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
if(families.length > 1){
chaine = families[familyName].map(function(variants) {
return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
})
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div><div class="btn-accordion"></div><div class="box-sub-fonts">'+ chaine.join('') +'</div>';
} else {
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '</div>';
}
}).join('') + '</div>';
This code access to the font family having 1 variant only.
for(var k in families) if(families[k].length === 1)
I am creating a directive, which is used to add and remove elements dynamically. But my ng-click fires multiple times while adding and removing elements. Please give suggestions.
Here enable values means to select when 1=>textbox; 2=>selectbutton;3=>Radio button; 4=>CheckBox;5=>+/-
HTML:
<body ng-app = "mainApp" ng-controller = "loginController">
<div id="sampleeid">
<incrementrowsdirective idvalue="sto"
arrayvalues='[]'
labelvalues='["Concepto","Monto","Add/Remove"]'
enablevalues='[2,1,5]'></incrementrowsdirective>
<button ng-click="SampleButton()">Sample
Button</button>
</div>
CODE:
gasapp.directive("incrementrowsdirective", function ($compile) {
var trheaderelements;
var tablenm;
var tablenm1;
var trelements;
var trfirstelement;
var firstelement;
return {
restrict: 'AE',
scope: {
idvalue: '#'
},
template: function (elem, attr) {
return '<div class="col-md-8 col-sm-11 col-xs-11"><table id="tableheaderid"></table> <table id="tableid' + attr.idvalue + '" class="table table-condensed table-striped table-bordered table-hover no-margin">' +
'</table></div>'
},
link: function (scope, iElement, iAttrs) {
scope.labelval = JSON.parse(iAttrs.labelvalues);
scope.enableval = JSON.parse(iAttrs.enablevalues);
scope.arrt = JSON.parse(iAttrs.arrayvalues);
scope.c = 0;
scope.count = 1;
trheaderelements = '<thead><tr id="mytrheader' + scope.idvalue + '" >';
angular.forEach(scope.labelval, function (value, key) {
trheaderelements = trheaderelements + '<th style="width: 20%;"> ' + value + ' </th>';
});
trheaderelements = trheaderelements + "</tr></thead>";
tablenm = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trheaderelements);
$compile(tablenm)(scope);
trfirstelement = "<tr id='mytrfirstelement'>";
angular.forEach(scope.enableval, function (value, key) {
if (value == 1) {
trfirstelement = trfirstelement + '<td><input type="text" name="text1name' + scope.idvalue + value + key + '" ng-model="text1value' + scope.idvalue + value + key + '" id="text1valueeid' + scope.idvalue + value + key + '" > </td>';
}
if (value == 2) {
trfirstelement = trfirstelement + '<td><select id="selectid1value' + scope.idvalue + value + key + '" name="selectname1val' + scope.idvalue + value + key + '" ng-model="selectmodel1val' + scope.idvalue + value + key + '" style="width:185px;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trfirstelement = trfirstelement + '<td><input type="radio" id="radio1idvalue' + scope.idvalue + value + key + '" name="radio1nameval' + scope.idvalue + value + key + '" ng-model="radio1modelval' + scope.idvalue + value + key + '" > </td>';
}
if (value == 4) {
trfirstelement = trfirstelement + '<td><input type="checkbox" id="checkbox1idval' + scope.idvalue + value + key + '" name="checkbox1nameval' + scope.idvalue + value + key + '" ng-model="checkbox1modelval' + scope.idvalue + value + key + '"> </td>';
}
if (value == 5) {
trfirstelement = trfirstelement + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + value + key + '" ng-click="addRow1(' + scope.c + ')">' +
' </td>';
}
});
trfirstelement = trfirstelement + "</tr>";
firstelement = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trfirstelement);
$compile(firstelement)(scope);
trfirstelement = '';
scope.addRow1 = function (a) {
scope.c++;
scope.count++;
trelements = '<tr id=mytr' + scope.idvalue + scope.c + '>';
angular.forEach(scope.enableval, function (value, key) {
scope.keyvalue = key;
if (value == 1) {
trelements = trelements + '<td><input type="text" name="text1name' + scope.idvalue + scope.c + value + key + '" ng-model="text1value' + scope.idvalue + scope.c + value + key + '" id="text1valueeid' + scope.idvalue + scope.c + value + key + '" > </td>';
}
if (value == 2) {
trelements = trelements + '<td><select id="selectid' + scope.idvalue + scope.c + value + key + '" name="selectname' + scope.idvalue + scope.c + value + key + '" ng-model="selectmodel' + scope.idvalue + scope.c + value + key + '" style="width:100%;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trelements = trelements + '<td><input type="radio" id="radioid' + scope.idvalue + scope.c + value + key + '" ></input> </td>';
}
if (value == 4) {
trelements = trelements + '<td><input type="checkbox" id="checkboxid' + scope.idvalue + scope.c + value + key + '" name="aaa" ></input> </td>';
}
if (value == 5) {
trelements = trelements + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '" ng-click="addRow1(' + scope.c + ')">' + ' <input type="button" value="-" ng-click="removerowbutton1(' + scope.c + ')" > </td>';
}
});
trelements = trelements + "</tr>";
tablenm1 = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trelements);
$compile(tablenm1)(scope);
trelements = '';
}
scope.removerowbutton1 = function (index) {
//scope.c--;
alert("Removed")
var myEl = angular.element(document.querySelector('#mytr' + scope.idvalue + index));
myEl.remove();
}
}
};
});
Need to remove the lines,
$compile( firstelement )( scope );
$compile( tablenm1 )( scope );
and replace the line with
firstelement = angular.element(document.getElementById('tableid'+scope.idvalue)).append($compile(trfirstelement)(scope));
It´s is not very clear to me why I am not get any data appended when I have a lot of data to be appended.
When I have 3 objects It works fine, for a larger number it does not append data.
I believe that append is been called before the for loop is finished. Could be that?
building the <tr>'s:
for (var i = 0; i < obj.length; i++) {
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
}
appending:
$('#tblBusca').append(trs);
Try appending row by row
for (var i = 0; i < obj.length; i++) {
var trs;
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
$('#tblBusca').append(trs);
}