CODEWITHSUNDEEP
javascripthtml
Robert Ross
Robert Ross

Reputation: 1189

Not able to display all values in an html table

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

Answers (3)

zer00ne
zer00ne

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>');

SNIPPET

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

Mohammad Batroukh
Mohammad Batroukh

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

Matt Burland
Matt Burland

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

Related Questions