Reputation: 1189
For unknown reasons to me I cannot display the last (sProductLink
) value in this table :
<thead>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Brand</th>
<th>Price</th>
<th>Link</th>
</tr>
</thead>
I cannot see any reason for this issue. The html is the same as for the other elements.
Whne I look in the DOM I don't see the "Link" <td>
at all, which means it is not added for some reason.
Here is the code for this. I will really appreciate if someone has a look at this.
$("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">'
+sProductId+"<span data-i-user-id='"
+sProductId+"'</span>"
+"<button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>Edit</button>"
+ "<button id='deleteBtn' class='btn btn-danger deleteBtn'>Delete</button>"
+'</th><td class="nameDom">'
+sProductName+'</td><td class="brandDom">'
+sProductBrand+'</td><td class="priceDom">'
+sProductPrice+'</td><td class="linkDom">'
+sProductLink+'</td></tr>');
P.S. I'd also appreciate any tips on how can I do what I am doing here in an alternative(better) way. Without all the apostrophes and etc.
Upvotes: 0
Views: 82
Reputation: 44118
In the area where the skull 💀 is indicating, there's no greater than bracket >
to close the inside of the <span>
.
$("#lblEditDeleteProducts").append(
'<tr>
<th class="idDom" scope="row">'+sProductId+'
<span data-i-user-id="'+sProductId+'"💀</span>
<button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">
Edit
</button>
<button id="deleteBtn" class="btn btn-danger deleteBtn">
Delete
</button>
</th>
<td class="nameDom">'+sProductName+'</td>
<td class="brandDom">'+sProductBrand+'</td>
<td class="priceDom">'+sProductPrice+'</td>
<td class="linkDom">'+sProductLink+'</td>
</tr>');
var sProductId = 'sProd01';
var sProductName = 'sProExtreme';
var sProductBrand = 'sProâ„¢';
var sProductPrice = 54.99;
var sProductLink = 'http://shop.spro.com';
$("#lblEditDeleteProducts").append('<tr><th class="idDom" scope="row">' + sProductId + '<span data-i-user-id="' + sProductId + '"></span><button type="button" id="editBtn" class="btn btn-warning editBtn" data-toggle="modal" data-target="#myModal">Edit</button><button id="deleteBtn" class="btn btn-danger deleteBtn">Delete</button></th><td class="nameDom">' + sProductName + '</td><td class="brandDom">' + sProductBrand + '</td><td class="priceDom">' + sProductPrice + '</td><td class="linkDom">' + sProductLink + "</td></tr>");
table {
border: 5px inset orange;
}
tr {
background: rgba(0, 0, 0, .7);
}
th {
border: 5px dashed green;
color: yellow;
}
td {
border: 2px inset blue;
color: cyan;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/[email protected],[email protected](css/bootstrap.min.css+css/bootstrap-theme.min.css)">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lblEditDeleteProducts"></table>
Upvotes: 1
Reputation: 13
I strongly suggest that you write the HTML that you're trying to append inside an editor, spaced out so you can see the structure properly and debug from there. You can minify it afterwards and test to ensure that it's in working order.
<tr>
<th class="idDom" scope="row">
+ sProductId +
<span data-i-user-id='"+sProductId+"'><!-- Closing '>' added (Thanks Matt) --></span>
<button type='button' id='editBtn' class='btn btn-warning editBtn' data-toggle='modal' data-target='#myModal'>
Edit
</button>
<button id='deleteBtn' class='btn btn-danger deleteBtn'>
Delete
</button>
</th>
<td class="nameDom">
+ sProductName +
</td>
<td class="brandDom">
+ sProductBrand +
</td>
<td class="priceDom">
+ sProductPrice +
</td>
<td class="linkDom">
+ sProductLink +
</td>
</tr>
Dont forget the ""
marks around your HTML
Upvotes: 0
Reputation: 45155
This part of your string:
"<span data-i-user-id='" +sProductId+"'</span>"
Should probably be:
"<span data-i-user-id='" +sProductId+"'></span>"
This is why building HTML via string concatenation is a colossal pain.
Upvotes: 1