php - 如何替换 html 表格 onchange 的单列

Question

我无法找到一种有效的方法来更新 html 表中的列而不重新加载整个表。该表是玩家统计数据的列表，除了最后一列之外，所有这些都存储在我的 MYSQL 数据库中并加载到表中。表的最后一列中的数据来自 XML 文件。页面上有一个选择下拉列表，当用户更改它时，我需要页面对 XML 数据进行一些计算并仅重新加载表的最后一列，而无需进行 AJAX 调用并重新加载整个统计表。目前我重新加载整个表，这非常慢。这就是我生成表格的方式:

echo '<table name="currentTable" id="battersTable">
                <thead>
                    <tr>
                        <th>&nbsp </th>
                        <th>NAME</th>
                        <th>AGE</th>
                        <th>
                            <select class="posSelect" onchange="posSelect(this.value, this.parentNode.parentNode.parentNode.parentNode)">
                                <option value="ALL">POS: ALL</option>
                                <option value="C">POS: C</option>
                                <option value="1B">POS: 1B</option>
                                <option value="2B">POS: 2B</option>
                                <option value="SS">POS: SS</option>
                                <option value="3B">POS: 3B</option>
                                <option value="MI">POS: MI</option>
                                <option value="CI">POS: CI</option>
                                <option value="OF">POS: OF</option>
                            </select>
                        </th>
                        <th>TEAM</th>
                        <th>AB</th>
                        <th>R</th>
                        <th>HR</th>
                        <th>RBI</th>
                        <th>SB</th>
                        <th>AVG</th>';
                        if($draftType == 0){
                            echo '<th>ADP</th>
                        <th id="chance">CHANCE</th>';
                        }else if($draftType == 1){
                            echo '<th>$</th>';
                        }
                    echo'</tr></thead>
            <tbody id="replacebatters">';

while($row = mysqli_fetch_array($resultbat, MYSQLI_ASSOC))
  {     
    if(array_key_exists($row['NAME'], $crossed)){
        echo "<tr class='drafted' id='" . $row['NAME'] . "'>";
    }else if(array_key_exists($row['NAME'], $rostered)){
        echo "<tr class='roster' id='" . $row['NAME'] . "'>";
    }else if($n&1){
        echo "<tr id='" . $row['NAME'] . "'>";
    }else{
        echo "<tr class='alt' id='" . $row['NAME'] . "'>";
    }

  echo '<th>Draft</td>';
  echo '<td>' . $row['NAME'] . "</td>";
  echo "<td>" . $row['AGE'] . "</td>";
  echo "<td>" . $row['POS'] . "</td>";
  echo "<td>" . $row['TM'] . "</td>";
  echo "<td>" . $row['AB'] . "</td>";
  echo "<td class='runs'>" . $row['R'] . "</td>";
  echo "<td class='hr'>" . $row['HR'] . "</td>";
  echo "<td class='rbi'>" . $row['RBI'] . "</td>";
  echo "<td class='sb'>" . $row['SB'] . "</td>";
  echo "<td class='avg'>" . $row['AVG'] . "</td>";
if ($draftType == 0)
{
    $player = $MDCxml->xpath('//player[@name="' . $row['NAME'] . '"]');
    if (is_array($player) && count($player)) {
        $player = $player[0];
    } else {
        continue; // not found
    }

    $attr = $player->attributes(); 

    $adp = (float) $attr['adp'];
    $early = (int) $attr['early'];      

    $stdev = -0.42+0.42*($adp-$early);

    if($stdev<0)
        $stdev = 1;
    $chance =number_format(((1-NORMDIST($pickNumber,$adp,$stdev,TRUE))*100), 0);

    echo "<td class='adp'>".$adp."</td>";
    echo "<td class='odds'>".$chance."%</td>";
}elseif ($draftType == 1){
    echo "<td class='dollar'>$14</td>";
}     
  echo "</tr>";
  $n = ++$n;
  }
echo "</tbody></table>";

更改下面的下拉列表时，我需要使用用户选择的当前回合更新 $pickNumber(所选回合 * 存储的选择编号)变量，并使用新计算的 $chance 变量更新 CHANCE 列中的值。这是下拉选择:

echo "Current Round: ";
    echo "<select id='round' size='1' onchange='***NOT SURE WHAT TO DO HERE***'>";

    for($q = 1; $q <= $rosterSizeRow['roster_size']; $q++)
    {
        if ($q == $_GET['round'])
        {
            echo "<option value=".$q." selected> ".$q." </option>";
        }else{
            echo "<option value=".$q."> ".$q." </option>";
        }
    }
    echo "</select>";

提前致谢。

Answer 1

您可以看到XMLHttpRequest供引用文档。在同一页面上，see also部分有几个关于如何使用 XMLHttpRequest 以及如何进行 AJAX 调用的链接。

首先，您可以查看这段未经测试的代码

HTML:

<div>
    <label for="round">Round:</label>
    <select id="round" name="round" onchange="ajaxUpdateChance(this)">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
    </select>
</div>

jQuery:

function updateChance(data)
{
    var table = $('#battersTable');
    $('.odds', table).each(function(index, element) {
                               $(element).text(data[index] + '%');
                           });
}

function ajaxUpdateChance(el) {
    var round = el.value;
    $.ajax({ url: 'http://www.example.com/update_chance.php',
             data: { round: round },
             dataType: 'json',
             success: updateChance });
}

ajaxUpdateChance 检索odds 列的数据。 updateChance 迭代 odds 列条目并从 data 数组设置新文本。 data 数组应该是 JSON 数组。