Question

我有一个基本表，一列应该有一个活动/等待徽章。

我通过已实现的Websocket收到此信息。到目前为止效果很好。

最初，我能够将标志添加到看起来像这样的列中：

<td th:id="${car.getBrand()}"><span value="${car.getBrand()}" class="badge badge-success">Active</span></td>

或这个

<td th:id="${car.getBrand()}"><span value="${car.getBrand()}" class="badge badge-light">Waiting</span></td>

这是在此代码的帮助下实现的，并做了应做的事情：

  var tableEntry = document.getElementById(message.content[0])
  if (message.content[1] === 'true') {
    var span = document.createElement('span')
    span.value = message.content[0]
    span.innerHTML = '<span class="badge badge-success">Active</span>'
    tableEntry.appendChild(span)
  } else {
    var span = document.createElement('span')
    span.value = message.content[0]
    span.innerHTML = '<span class="badge badge-light">Waiting</span>*'
    tableEntry.appendChild(span)
  }

我怎么了？

我尝试删除<td>...</td>内部的现有span元素的最后几个小时之前，我使用上面创建的函数插入了新的span代码。匹配条目应通过span属性 value 找到。我真的很努力，但是现在我放弃了。

请帮助我。

Answer 1

根据实际要执行的操作，您需要直接编辑所需的确切节点，或者删除旧节点并追加新节点。没有更多的上下文，我建议彻底替换节点：

var tableEntry = document.getElementById(message.content[0])

// Note that we can move the duplicated code to outside if block
// and make it clearer as to exactly the difference between the
// branches
var span = document.createElement('span')
span.value = message.content[0];

if (message.content[1] === 'true') {
  span.innerText = 'Active';
  span.className = 'badge badge-success';
} else {
  span.innerText = 'Waiting';
  span.className = 'badge badge-light';
}

// Here we remove all children
while (tableEntry.firstChild)
  tableEntry.removeChild(tableEntry.firstChild);

// ... before add the new content
tableEntry.appendChild(span);

编辑

如果您愿意使用jQuery，请尝试：

var $newSpan = $('<span>', {'class': 'badge'});
var $td = $('#' + message.content[0]);

if (message.content[1] === 'true')
  $newSpan.addClass('badge-success').text('Active');
else
  $newSpan.addClass('badge-light').text('Waiting');

$td.empty().append( $newSpan );

或者，您可以直接更新该范围：

if ( message.content[1] === 'true' )
  $('#' + message.content[0]).find('span').removeClass('badge-light').addClass('badge-success').text('Active');
else
  $('#' + message.content[0]).find('span').removeClass('badge-success').addClass('badge-light').text('Waiting');

Answer 2

您只是在寻找这个吗？

$（'td'）。find（'span'）。remove（）;

虽然我可能在这里遗漏了一些东西，如果可以的话，我可以更好地写下答案。由于我不确定“ message.content [n]”中的内容，因此在构建跨度时为什么不添加一个唯一的ID。这样一来，当您更新JavaScript中的跨度时，就可以引用要删除的正确跨度，然后追加？

//remove it
$('td').find('#yourSpanId').remove()
//now assign id to new span object
span.id = message.propetyToUseAsId //i do not know all properties of your object
var span = document.createElement('span')
span.value = message.content[0]
span.innerHTML = '<span class="badge badge-light">Waiting</span>*'
/***********  soemthing like this *************/
span.id = message.propetyToUseAsId //i do not know all properties of your object
tableEntry.appendChild(span)

这有帮助吗？如果我们可以看到所有对象属性，并查找对象ID或可以用作ID的每个对象所独有的东西，将会更容易。我喜欢在构建这样的模板时使用自定义属性而不是ID，因此我可以在页面周期或生命周期的稍后阶段基于每个对象引用任何东西。

Answer 3

由于管理员要求我在此处发布解决方案，所以我照做了。

这是完成任务的代码

<table id="gbdb" class="table table-bordered table-striped" style="width:100%">
  <thead>
    <tr>
     <th>Name</th>
     <th>Status</th>
    </tr>
  </thead>
  <tbody>

<c:forEach items="${guestbookList}" var="guestbook">
  <tr>
    <td>${guestbook.name}</td>
    <td>${guestbook.status}</td>
    <!-- ... -->

谢谢您的帮助，没有您，我不会成功：）

删除父HTML元素中的HTML元素

3 个答案:

编辑