Question

由于我未知的原因，我无法在此表中显示最后一个（sProductLink）值：

<thead>
    <tr>
        <th>Id</th>
        <th>Product Name</th>
        <th>Brand</th>
        <th>Price</th>
        <th>Link</th>
    </tr>
</thead>

我看不出这个问题的任何原因。 html与其他元素相同。当我看到DOM时，我看不到＆＃34; Link＆＃34;完全<td>，这意味着它不会因某种原因而被添加。

以下是此代码。如果有人看看这个，我将非常感激。

  $("#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。我也很欣赏有关如何以其他（更好）的方式做我在这里做的事情的任何提示。没有所有的撇号等等。

Answer 1

你的字符串的这一部分：

"<span data-i-user-id='" +sProductId+"'</span>"

应该是：

"<span data-i-user-id='" +sProductId+"'></span>"

这就是为什么通过字符串连接来构建HTML是一个巨大的痛苦。

Answer 2

在头骨指示的区域，没有大于括号 >来关闭<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>');

段

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/fontawesome@4.6.3,bootstrap@3.3.7(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>

＆＃13;

Answer 3

我强烈建议你编写你想要在编辑器中追加的HTML，间隔开，以便你可以正确地看到结构并从那里进行调试。您可以在之后缩小它并进行测试，以确保它处于正常工作状态。

    <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>

不要忘记HTML周围的""标记

无法在html表

3 个答案:

段