Question

我想用一条消息替换表格的行，到目前为止，我只能替换它的一部分。从我所看到的只有被替换的行的第一个单元格中，其余单元格被留空而不是替换所有单元格。

HTML：

<div class="modal fade" id="duel_pp" tabindex="-1" role="dialog" aria-labelledby="duel_pp">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="duel_pp_content">Duel</h4>
      </div>
      <div class="modal-body">
       <div id="userlist">
        <table>
          <thead>
            <th>Player</th>
            <th>Energy</th>
            <th>Country</th>
            <th>Region</th>
            <th>Duel</th>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

的script.js

var duelWon = '<div class=\'alert alert-success text-center\'><b>Congratulations!</b> You\'ve won.</div>';
var duelLost = '<div class=\'alert alert-warning text-center\'><b>You\'ve lost!</b> Better luck next time.</div>';
var duelFailed = '<div class=\'alert alert-danger text-center\'><b>Something went wrong, try again!</b></div>';
// DOM Ready =============================================================

//Open and populate Duel Window
$(document).ready(function() {
   $("#duel").click(function(){
        populateTable();
    });
})
// Send duel request and post result    
$(document).on("click", ".select_target", function(){
    var cursor = $(this).closest(".target_row");
    $.ajax({
        url: "/modalRoutes/duel_target",
        type: "POST",
        dataType: "json",
        data: {
            id: $(this).closest("tr").find(".target_name").text()
        },
        cache: false,
        timeout: 5000,
        complete: function() {

          console.log('complete')
        },

        success: function(data) {
            console.log(data)
            if (data.duelResult === 'won') {
                cursor.replaceWith(duelWon)
            } else if (data.duelResult === 'lost') {
                cursor.replaceWith(duelLost)
            } else {
                cursor.replaceWith(duelFailed)
            }

       },

        error: function() {
          cursor.replaceWith(duelFailed)
        },
      });
});

// Functions =============================================================

// Duel User Table
function populateTable() {

    // Empty content string
    var tableContent = '';

    // jQuery AJAX call for JSON
    $.getJSON( '/modalRoutes/validTargets', function( data ) {
        // For each item in our JSON, add a table row and cells to the content string
       $.each(data, function(){
            tableContent += '<tr class=\'target_row\'>';
            tableContent += '<td class=\'target_name\'>' + this.local.username + '</td>'; 
            tableContent += '<td>' + this.local.energy + '</td>';
            tableContent += '<td>' + this.local.country + '</td>';
            tableContent += '<td>' + this.local.region + '</td>';
            tableContent += '<td> <button type=\'button\' class=\'btn btn-danger select_target\'> Duel </button></td>';
            tableContent += '</tr>';
        });

        // Inject the whole content string into our existing HTML table
        $('#duel_pp #userlist table tbody').html(tableContent);
    });
};

这是结果发布后的html。

<div class="modal-body">
   <div id="userlist">
      <table>
         <thead>
            <tr>
               <th>Player</th>
               <th>Energy</th>
               <th>Country</th>
               <th>Region</th>
               <th>Duel</th>
            </tr>
         </thead>
         <tbody>
            <tr class="target_row">
               <td class="target_name">Asd</td>
               <td>25</td>
               <td>Andorra</td>
               <td>Encamp</td>
               <td> <button type="button" class="btn btn-danger select_target"> Duel </button></td>
            </tr>
            <div class="alert alert-warning text-center"><b>You've lost!</b> Better luck next time.</div>
            <tr class="target_row">
               <td class="target_name">Ionel</td>
               <td>10</td>
               <td>Andorra</td>
               <td>La Massana</td>
               <td> <button type="button" class="btn btn-danger select_target"> Duel </button></td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

结果非常难看

上面的代码是与此表相关的所有代码。

Answer 1

在<tr>元素

周围使用<td colspan="5">和<div>

@IllogicalArgumentException：thx

用div消息替换整个表行

1 个答案: