Brownman Revival
Reputation: 3850
appending new row in table is distorted jquery
var data = [{
"landpin": "015-08-0011-000-01",
"landarp": "015-08-0011-000-01",
"landtin": "342-432-423-000",
"landfirstname": "John",
"landmiddlename": "James",
"landlastname": "Jones",
"landsuffix": "",
"landqtr": "1st",
"landyear": "2014",
"landkindcode": "1",
"landkindname": "Land",
"landkindsysid": "1",
"landsurvey": "PSD-413-621-513",
"landtct_cloa": "OCT-351-561-623",
"landarea": "1000",
"landclassification": "Residential",
"landclasscode": "R",
"landprovince": "Province",
"landmunicipality": "Municipality",
"landbarangay": "District",
"landlot": "3",
"landblock": "6",
"LandAddress": [{
"landownercontactflag": "0",
"landownerprovince": "Province",
"landownermunicipality": "Municipality",
"landownerbarangay": "District 2",
"landownerstreet": "23",
"landownerzipcode": "4311"
}, {
"landownercontactflag": "1",
"landownerprovince": "Province 2",
"landownermunicipality": "Municipality 3",
"landownerbarangay": "District 3",
"landownerstreet": "34",
"landownerzipcode": "1218"
}],
"bldgpin": "015-08-0011-000-01-1001",
"bldgtin": "342-432-423-000",
"bldgfirstname": "John",
"bldgmiddlename": "James",
"bldglastname": "Jones",
"bldgsuffix": "",
"bldgqtr": "1st",
"bldgyear": "2013",
"bldgkindcode": "10",
"bldgkindname": "Buildings and Other Structures",
"bldgkindsysid": "10",
"BuildingAddress": [{
"bldgownercontactflag": "0",
"bldgownerprovince": "Province",
"bldgownermunicipality": "Municipality",
"bldgownerbarangay": "District 2",
"bldgownerstreet": "23",
"bldgownerzipcode": "4311"
}, {
"bldgownercontactflag": "1",
"bldgownerprovince": "Province 2",
"bldgownermunicipality": "Municipality 3",
"bldgownerbarangay": "District 3",
"bldgownerstreet": "34",
"bldgownerzipcode": "1218"
}],
"mchnspin": "015-08-0011-000-01-2001",
"mchnstin": "342-432-423-000",
"mchnsfirstname": "John",
"mchnsmiddlename": "James",
"mchnslastname": "Jones",
"mchnssuffix": "",
"mchnsqtr": "1st",
"mchnsyear": "2013",
"mchnskindcode": "3",
"mchnskindname": "Machinery",
"mchnskindsysid": "3",
"otherspin": "015-08-0011-000-01",
"otherstin": "342-432-423-000",
"otherfirstname": "John",
"othermiddlename": "James",
"otherlastname": "Jones",
"othersuffix": "",
"othersqtr": "1st",
"othersyear": "2013",
"otherskindcode": "11",
"otherskindname": "Other Improvements",
"otherskindsysid": "11"
}, {
"landpin": "015-08-0011-000-01",
"landarp": "015-08-0011-000-01",
"landtin": "342-432-423-000",
"landfirstname": "John",
"landmiddlename": "James",
"landlastname": "Jones",
"landsuffix": "",
"landqtr": "1st",
"landyear": "2014",
"landkindcode": "1",
"landkindname": "Land",
"landkindsysid": "1",
"landsurvey": "PSD-413-621-513",
"landtct_cloa": "OCT-351-561-623",
"landarea": "1000",
"landclassification": "Residential",
"landclasscode": "R",
"landprovince": "Province",
"landmunicipality": "Municipality",
"landbarangay": "District",
"landlot": "3",
"landblock": "6",
"LandAddress": [{
"landownercontactflag": "0",
"landownerprovince": "Province",
"landownermunicipality": "Municipality",
"landownerbarangay": "District 2",
"landownerstreet": "23",
"landownerzipcode": "4311"
}, {
"landownercontactflag": "1",
"landownerprovince": "Province 2",
"landownermunicipality": "Municipality 3",
"landownerbarangay": "District 3",
"landownerstreet": "34",
"landownerzipcode": "1218"
}],
"bldgpin": "015-08-0011-000-01-1001",
"bldgtin": "342-432-423-000",
"bldgfirstname": "John",
"bldgmiddlename": "James",
"bldglastname": "Jones",
"bldgsuffix": "",
"bldgqtr": "1st",
"bldgyear": "2014",
"bldgkindcode": "10",
"bldgkindname": "Buildings and Other Structures",
"bldgkindsysid": "10",
"BuildingAddress": [{
"bldgownercontactflag": "0",
"bldgownerprovince": "Province",
"bldgownermunicipality": "Municipality",
"bldgownerbarangay": "District 2",
"bldgownerstreet": "23",
"bldgownerzipcode": "4311"
}, {
"bldgownercontactflag": "1",
"bldgownerprovince": "Province 2",
"bldgownermunicipality": "Municipality 3",
"bldgownerbarangay": "District 3",
"bldgownerstreet": "34",
"bldgownerzipcode": "1218"
}],
"mchnspin": "015-08-0011-000-01-2001",
"mchnstin": "342-432-423-000",
"mchnsfirstname": "John",
"mchnsmiddlename": "James",
"mchnslastname": "Jones",
"mchnssuffix": "",
"mchnsqtr": "1st",
"mchnsyear": "2013",
"mchnskindcode": "3",
"mchnskindname": "Machinery",
"mchnskindsysid": "3",
"otherspin": "015-08-0011-000-01",
"otherstin": "342-432-423-000",
"otherfirstname": "John",
"othermiddlename": "James",
"otherlastname": "Jones",
"othersuffix": "",
"othersqtr": "1st",
"othersyear": "2013",
"otherskindcode": "11",
"otherskindname": "Other Improvements",
"otherskindsysid": "11"
}]
var arr2 = [];
var landtr = $('<tr><tr/>');
var bldgtr = $('<tr><tr/>');
var td;
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
td = $('<td/>');
var land = data[i].landpin + data[i].landyear + data[i].landkindsysid;
var bldg = data[i].bldgpin + data[i].bldgyear + data[i].bldkindsysid;
var mchns = data[i].mchnspin + data[i].mchnsyear + data[i].mchnskindsysid;
var others = data[i].otherspin + data[i].othersyear + data[i].otherskindsysid;
if ($.inArray(land, arr2) == -1) { //check if id value not exits than add it
arr2.push(land);
if (data[i].landpin) {
var landaddress = data[i].LandAddress;
landtr.append("<td id=''>" + data[i].landarp + "</td>");
landtr.append("<td id=''>" + data[i].landarp + "</td>");
landtr.append("<td id=''>" + data[i].landpin + "</td>");
landtr.append("<td id=''>" + (data[i].landlot ? "Lot " + data[i].landlot : "") + "/" + (data[i].landblock ? "Block " + data[i].landblock : "") + "</td>");
landtr.append("<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>");
for (var land = 0; land < landaddress.length; land++) {
var contactaddress;
var homeaddress;
landtr.append("<td id=''>" + landaddress[land].landownercontactflag === "1" ? (contactaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) : (homeaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) + "</td>");
}
landtr.append("<td id=''>" + data[i].landkindname + "</td>");
landtr.append("<td id=''>" + data[i].landclassification + "</td>");
landtr.append("<td id=''>" + data[i].landfinalvalue + "</td>");
landtr.append("<td id=''></td>");
landtr.append("<td id=''>" + data[i].landyear + "</td>");
landtr.append("<td id=''></td>");
}
$("#searchresult").append(landtr);
}
if ($.inArray(bldg, arr2) == -1) { //check if id value not exits than add it
arr2.push(bldg);
if (data[i].bldgpin) {
var bldgaddress = data[i].BuildingAddress;
bldgtr.append("<td id=''>" + data[i].bldgarp + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgarp + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgpin + "</td>");
bldgtr.append("<td id=''>" + (data[i].bldglot ? "Lot " + data[i].bldglot : "") + "/" + (data[i].bldgblock ? "Block " + data[i].bldgblock : "") + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgfirstname + " " + data[i].bldgmiddlename + " " + data[i].bldglastname + ", " + data[i].bldgsuffix + "</td>");
for (var bldg = 0; bldg < bldgaddress.length; bldg++) {
var contactaddress;
var homeaddress;
bldgtr.append("<td id=''>" + bldgaddress[bldg].bldgownercontactflag === "1" ? (contactaddress = bldgaddress[bldg].bldgownerprovince + " " + bldgaddress[bldg].bldgownermunicipality + " " + bldgaddress[bldg].bldgownerbarangay + ", " + bldgaddress[bldg].bldgownerstreet) : (homeaddress = bldgaddress[bldg].bldgownerprovince + " " + bldgaddress[bldg].bldgownermunicipality + " " + bldgaddress[bldg].bldgownerbarangay + ", " + bldgaddress[bldg].bldgownerstreet) + "</td>");
}
bldgtr.append("<td id=''>" + data[i].bldgkindname + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgclassification + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgfinalvalue + "</td>");
bldgtr.append("<td id=''></td>");
bldgtr.append("<td id=''>" + data[i].bldgyear + "</td>");
bldgtr.append("<td id=''></td>");
}
$("#searchresult").append(bldgtr);
}
// if ($.inArray(mchns, arr2) == -1) { //check if id value not exits than add it
// arr2.push(mchns);
// if(data[i].mchnspin){
// $("#searchresult").append("<tr><td id=''>" + data[i].mchnspin + "</td>"
// +"<td id=''>" + data[i].mchnstin + "</td>"
// +"<td data-table='machines'>" + data[i].mchnskindname + "</td>"
// +"<td id=''>" + data[i].mchnsfirstname + " " + data[i].mchnsmiddlename + " " + data[i].mchnslastname + ", " + data[i].mchnssuffix + "</td>"
// +"<td id=''>" + data[i].mchnsqtr + "</td>"
// +"<td id=''>" + data[i].mchnsyear + "</td>"
// +"<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].mchnspin + " href='#' >View Details</a>" + "</td></tr>");
// tr.append("<td id=''>" + data[i].mchnstin + "</td>");
// tr.append("<td id=''>" + data[i].mchnsfirstname + " " + data[i].mchnsmiddlename + " " + data[i].mchnslastname + ", " + data[i].mchnssuffix + "</td>");
// tr.append("<td id=''>" + data[i].mchnsqtr + "</td>");
// tr.append("<td id=''>" + data[i].mchnsyear + "</td>");
// }
// }
// if ($.inArray(others, arr2) == -1) { //check if id value not exits than add it
// arr2.push(others);
// if(data[i].otherspin){
// $("#searchresult").append("<tr><td id=''>" + data[i].otherspin + "</td>"
// +"<td id=''>" + data[i].otherstin + "</td>"
// +"<td data-table='otherimprov'>" + data[i].otherskindname + "</td>"
// +"<td id=''>" + data[i].otherfirstname + " " + data[i].othermiddlename + " " + data[i].otherlastname + ", " + data[i].othersuffix + "</td>"
// +"<td id=''>" + data[i].othersqtr + "</td>"
// +"<td id=''>" + data[i].othersyear + "</td>"
// +"<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].otherspin + " href='#' >View Details</a>" + "</td></tr>");
// tr.append("<td id=''>" + data[i].otherstin + "</td>");
// tr.append("<td id=''>" + data[i].othersfirstname + " " + data[i].othersmiddlename + " " + data[i].otherslastname + ", " + data[i].otherssuffix + "</td>");
// tr.append("<td id=''>" + data[i].othersqtr + "</td>");
// tr.append("<td id=''>" + data[i].othersyear + "</td>");
// }
// }
//tr.append("<td id=''>" + data[i].reg_year + "</td>");
//tr.append("<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].pin + " href='#' >View Details</a>" + "</td>");
//$("#searchresult").append(tr);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1" id="searchresult">
<tr align="center">
<td>ARPN</td>
<td>T.D.
<br>NO.</td>
<td>PIN</td>
<td>LOT/
<br>BLOCK
<br>NO.</td>
<td>PROPERTY
<br>OWNER</td>
<td>ADDRESS OF
<br>PROPERTY
<br>OWNER</td>
<td>K
<br>I
<br>N
<br>D</td>
<td>CLASSIFI-
<br>CATION</td>
<td>ASSESSED
<br>VALUE</td>
<td>LEGAL
<br>BASIS</td>
<td>EFFECTIVITY</td>
<td>REMARKS</td>
</tr>
</table>I want to append new row in table depending on the the pin. I am appending 4 types in my example i only added 2. When adding land the table is ok when i added building the table becomes distorted. It does not add new row instead it continues to previous row i specifically put var with value $('<tr><tr/>') and I append the data in that variable like variable.append("<td id=''>" + data[i].value+ "</td>") but then why is it that the table is distorted
Upvotes: 0
Views: 57
Answers (2)
PeterKA
Reputation: 24638
You need to clone your tr variables, otherwise you'll keep appending to the same tr element. For a start change your variables here to:
var land_tr = $('<tr><tr/>');
var bldg_tr = $('<tr><tr/>');
Then, add a clone line as shown below:
for (var i = 0; i < data.length; i++) {
var landtr = land_tr.clone(); // <<<<--- ADD THIS
var bldgtr = bldg_tr.clone(); // <<<<--- ADD THIS
tr = $('<tr/>');
td = $('<td/>');
var land = data[i].landpin + data[i].landyear + data[i].landkindsysid;
Please note: Even though your browser does not complain, the proper element to append a tr element to is a tbody, thead or tfoot element.
Upvotes: 0
Buzinas
Reputation: 11725
I could see two errors in your code:
- You were declaring the
landtrandldgtroutside the loop, and then you were creating only one row and appending all thetdtags inside those same two rows. - Your address code was with some shorthand statements (e.g
true ? x : y) that you were not using parenthesis to delimit them, that was causing some logic errors.
Take a look at your modified code below with the two errors above fixed:
var data = [{
"landpin": "015-08-0011-000-01",
"landarp": "015-08-0011-000-01",
"landtin": "342-432-423-000",
"landfirstname": "John",
"landmiddlename": "James",
"landlastname": "Jones",
"landsuffix": "",
"landqtr": "1st",
"landyear": "2014",
"landkindcode": "1",
"landkindname": "Land",
"landkindsysid": "1",
"landsurvey": "PSD-413-621-513",
"landtct_cloa": "OCT-351-561-623",
"landarea": "1000",
"landclassification": "Residential",
"landclasscode": "R",
"landprovince": "Province",
"landmunicipality": "Municipality",
"landbarangay": "District",
"landlot": "3",
"landblock": "6",
"LandAddress": [{
"landownercontactflag": "0",
"landownerprovince": "Province",
"landownermunicipality": "Municipality",
"landownerbarangay": "District 2",
"landownerstreet": "23",
"landownerzipcode": "4311"
}, {
"landownercontactflag": "1",
"landownerprovince": "Province 2",
"landownermunicipality": "Municipality 3",
"landownerbarangay": "District 3",
"landownerstreet": "34",
"landownerzipcode": "1218"
}],
"bldgpin": "015-08-0011-000-01-1001",
"bldgtin": "342-432-423-000",
"bldgfirstname": "John",
"bldgmiddlename": "James",
"bldglastname": "Jones",
"bldgsuffix": "",
"bldgqtr": "1st",
"bldgyear": "2013",
"bldgkindcode": "10",
"bldgkindname": "Buildings and Other Structures",
"bldgkindsysid": "10",
"BuildingAddress": [{
"bldgownercontactflag": "0",
"bldgownerprovince": "Province",
"bldgownermunicipality": "Municipality",
"bldgownerbarangay": "District 2",
"bldgownerstreet": "23",
"bldgownerzipcode": "4311"
}, {
"bldgownercontactflag": "1",
"bldgownerprovince": "Province 2",
"bldgownermunicipality": "Municipality 3",
"bldgownerbarangay": "District 3",
"bldgownerstreet": "34",
"bldgownerzipcode": "1218"
}],
"mchnspin": "015-08-0011-000-01-2001",
"mchnstin": "342-432-423-000",
"mchnsfirstname": "John",
"mchnsmiddlename": "James",
"mchnslastname": "Jones",
"mchnssuffix": "",
"mchnsqtr": "1st",
"mchnsyear": "2013",
"mchnskindcode": "3",
"mchnskindname": "Machinery",
"mchnskindsysid": "3",
"otherspin": "015-08-0011-000-01",
"otherstin": "342-432-423-000",
"otherfirstname": "John",
"othermiddlename": "James",
"otherlastname": "Jones",
"othersuffix": "",
"othersqtr": "1st",
"othersyear": "2013",
"otherskindcode": "11",
"otherskindname": "Other Improvements",
"otherskindsysid": "11"
}, {
"landpin": "015-08-0011-000-01",
"landarp": "015-08-0011-000-01",
"landtin": "342-432-423-000",
"landfirstname": "John",
"landmiddlename": "James",
"landlastname": "Jones",
"landsuffix": "",
"landqtr": "1st",
"landyear": "2014",
"landkindcode": "1",
"landkindname": "Land",
"landkindsysid": "1",
"landsurvey": "PSD-413-621-513",
"landtct_cloa": "OCT-351-561-623",
"landarea": "1000",
"landclassification": "Residential",
"landclasscode": "R",
"landprovince": "Province",
"landmunicipality": "Municipality",
"landbarangay": "District",
"landlot": "3",
"landblock": "6",
"LandAddress": [{
"landownercontactflag": "0",
"landownerprovince": "Province",
"landownermunicipality": "Municipality",
"landownerbarangay": "District 2",
"landownerstreet": "23",
"landownerzipcode": "4311"
}, {
"landownercontactflag": "1",
"landownerprovince": "Province 2",
"landownermunicipality": "Municipality 3",
"landownerbarangay": "District 3",
"landownerstreet": "34",
"landownerzipcode": "1218"
}],
"bldgpin": "015-08-0011-000-01-1001",
"bldgtin": "342-432-423-000",
"bldgfirstname": "John",
"bldgmiddlename": "James",
"bldglastname": "Jones",
"bldgsuffix": "",
"bldgqtr": "1st",
"bldgyear": "2014",
"bldgkindcode": "10",
"bldgkindname": "Buildings and Other Structures",
"bldgkindsysid": "10",
"BuildingAddress": [{
"bldgownercontactflag": "0",
"bldgownerprovince": "Province",
"bldgownermunicipality": "Municipality",
"bldgownerbarangay": "District 2",
"bldgownerstreet": "23",
"bldgownerzipcode": "4311"
}, {
"bldgownercontactflag": "1",
"bldgownerprovince": "Province 2",
"bldgownermunicipality": "Municipality 3",
"bldgownerbarangay": "District 3",
"bldgownerstreet": "34",
"bldgownerzipcode": "1218"
}],
"mchnspin": "015-08-0011-000-01-2001",
"mchnstin": "342-432-423-000",
"mchnsfirstname": "John",
"mchnsmiddlename": "James",
"mchnslastname": "Jones",
"mchnssuffix": "",
"mchnsqtr": "1st",
"mchnsyear": "2013",
"mchnskindcode": "3",
"mchnskindname": "Machinery",
"mchnskindsysid": "3",
"otherspin": "015-08-0011-000-01",
"otherstin": "342-432-423-000",
"otherfirstname": "John",
"othermiddlename": "James",
"otherlastname": "Jones",
"othersuffix": "",
"othersqtr": "1st",
"othersyear": "2013",
"otherskindcode": "11",
"otherskindname": "Other Improvements",
"otherskindsysid": "11"
}]
var arr2 = [];
var td;
var tr;
for (var i = 0; i < data.length; i++) {
var landtr = $('<tr><tr/>');
var bldgtr = $('<tr><tr/>');
tr = $('<tr/>');
td = $('<td/>');
var land = data[i].landpin + data[i].landyear + data[i].landkindsysid;
var bldg = data[i].bldgpin + data[i].bldgyear + data[i].bldkindsysid;
var mchns = data[i].mchnspin + data[i].mchnsyear + data[i].mchnskindsysid;
var others = data[i].otherspin + data[i].othersyear + data[i].otherskindsysid;
if ($.inArray(land, arr2) == -1) { //check if id value not exits than add it
arr2.push(land);
if (data[i].landpin) {
var landaddress = data[i].LandAddress;
landtr.append("<td id=''>" + data[i].landarp + "</td>");
landtr.append("<td id=''>" + data[i].landarp + "</td>");
landtr.append("<td id=''>" + data[i].landpin + "</td>");
landtr.append("<td id=''>" + (data[i].landlot ? "Lot " + data[i].landlot : "") + "/" + (data[i].landblock ? "Block " + data[i].landblock : "") + "</td>");
landtr.append("<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>");
var td_content = [];
for (var land = 0; land < landaddress.length; land++) {
var contactaddress;
var homeaddress;
td_content.push((landaddress[land].landownercontactflag === "1" ? (contactaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) : (homeaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet)));
}
landtr.append("<td id=''>" + td_content.join(' / ') + "</td>");
landtr.append("<td id=''>" + data[i].landkindname + "</td>");
landtr.append("<td id=''>" + data[i].landclassification + "</td>");
landtr.append("<td id=''>" + data[i].landfinalvalue + "</td>");
landtr.append("<td id=''></td>");
landtr.append("<td id=''>" + data[i].landyear + "</td>");
landtr.append("<td id=''></td>");
}
$("#searchresult").append(landtr);
}
if ($.inArray(bldg, arr2) == -1) { //check if id value not exits than add it
arr2.push(bldg);
if (data[i].bldgpin) {
var bldgaddress = data[i].BuildingAddress;
bldgtr.append("<td id=''>" + data[i].bldgarp + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgarp + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgpin + "</td>");
bldgtr.append("<td id=''>" + (data[i].bldglot ? "Lot " + data[i].bldglot : "") + "/" + (data[i].bldgblock ? "Block " + data[i].bldgblock : "") + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgfirstname + " " + data[i].bldgmiddlename + " " + data[i].bldglastname + ", " + data[i].bldgsuffix + "</td>");
var td_content = [];
for (var bldg = 0; bldg < bldgaddress.length; bldg++) {
var contactaddress;
var homeaddress;
td_content.push((bldgaddress[bldg].bldgownercontactflag === "1" ? (contactaddress = bldgaddress[bldg].bldgownerprovince + " " + bldgaddress[bldg].bldgownermunicipality + " " + bldgaddress[bldg].bldgownerbarangay + ", " + bldgaddress[bldg].bldgownerstreet) : (homeaddress = bldgaddress[bldg].bldgownerprovince + " " + bldgaddress[bldg].bldgownermunicipality + " " + bldgaddress[bldg].bldgownerbarangay + ", " + bldgaddress[bldg].bldgownerstreet)));
}
bldgtr.append("<td id=''>" + td_content.join(' / ') + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgkindname + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgclassification + "</td>");
bldgtr.append("<td id=''>" + data[i].bldgfinalvalue + "</td>");
bldgtr.append("<td id=''></td>");
bldgtr.append("<td id=''>" + data[i].bldgyear + "</td>");
bldgtr.append("<td id=''></td>");
}
$("#searchresult").append(bldgtr);
}
// if ($.inArray(mchns, arr2) == -1) { //check if id value not exits than add it
// arr2.push(mchns);
// if(data[i].mchnspin){
// $("#searchresult").append("<tr><td id=''>" + data[i].mchnspin + "</td>"
// +"<td id=''>" + data[i].mchnstin + "</td>"
// +"<td data-table='machines'>" + data[i].mchnskindname + "</td>"
// +"<td id=''>" + data[i].mchnsfirstname + " " + data[i].mchnsmiddlename + " " + data[i].mchnslastname + ", " + data[i].mchnssuffix + "</td>"
// +"<td id=''>" + data[i].mchnsqtr + "</td>"
// +"<td id=''>" + data[i].mchnsyear + "</td>"
// +"<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].mchnspin + " href='#' >View Details</a>" + "</td></tr>");
// tr.append("<td id=''>" + data[i].mchnstin + "</td>");
// tr.append("<td id=''>" + data[i].mchnsfirstname + " " + data[i].mchnsmiddlename + " " + data[i].mchnslastname + ", " + data[i].mchnssuffix + "</td>");
// tr.append("<td id=''>" + data[i].mchnsqtr + "</td>");
// tr.append("<td id=''>" + data[i].mchnsyear + "</td>");
// }
// }
// if ($.inArray(others, arr2) == -1) { //check if id value not exits than add it
// arr2.push(others);
// if(data[i].otherspin){
// $("#searchresult").append("<tr><td id=''>" + data[i].otherspin + "</td>"
// +"<td id=''>" + data[i].otherstin + "</td>"
// +"<td data-table='otherimprov'>" + data[i].otherskindname + "</td>"
// +"<td id=''>" + data[i].otherfirstname + " " + data[i].othermiddlename + " " + data[i].otherlastname + ", " + data[i].othersuffix + "</td>"
// +"<td id=''>" + data[i].othersqtr + "</td>"
// +"<td id=''>" + data[i].othersyear + "</td>"
// +"<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].otherspin + " href='#' >View Details</a>" + "</td></tr>");
// tr.append("<td id=''>" + data[i].otherstin + "</td>");
// tr.append("<td id=''>" + data[i].othersfirstname + " " + data[i].othersmiddlename + " " + data[i].otherslastname + ", " + data[i].otherssuffix + "</td>");
// tr.append("<td id=''>" + data[i].othersqtr + "</td>");
// tr.append("<td id=''>" + data[i].othersyear + "</td>");
// }
// }
//tr.append("<td id=''>" + data[i].reg_year + "</td>");
//tr.append("<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].pin + " href='#' >View Details</a>" + "</td>");
//$("#searchresult").append(tr);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1" id="searchresult">
<tr align="center">
<td>ARPN</td>
<td>T.D.
<br>NO.</td>
<td>PIN</td>
<td>LOT/
<br>BLOCK
<br>NO.</td>
<td>PROPERTY
<br>OWNER</td>
<td>ADDRESS OF
<br>PROPERTY
<br>OWNER</td>
<td>K
<br>I
<br>N
<br>D</td>
<td>CLASSIFI-
<br>CATION</td>
<td>ASSESSED
<br>VALUE</td>
<td>LEGAL
<br>BASIS</td>
<td>EFFECTIVITY</td>
<td>REMARKS</td>
</tr>
</table>UPDATE
If you want to display all the addresses in one single td, you must create an auxiliar variable to concatenate all the addresses, and then append the concatenation into a single td.
Look at the updated example above.
Upvotes: 1
Related Questions
- Row added twice to table with jQuery
- Appended new row is not behaving like previous one (row)
- Table 'add' row is adding more than one row
- jQuery Adding New Table Row Not at the End of the Table
- Jquery .html() adds only one row to the table
- Issues with adding new table's row with JQuery
- jQuery, adding multiple table rows is not working correctly
- Issue with Dynamically added rows in HTML Table
- Using jQuery .append to build table yielding incorrect html
- jQuery table append issue