1

テーブル全体をリロードせずに 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>";

前もって感謝します。

4

1 に答える 1

1

XMLHttpRequest参考資料をご覧ください。同じページの「 seealso」セクションには、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反復処理し、配列から新しいテキストを設定します。配列はJSON配列である必要があります。oddsdatadata

于 2013-01-30T12:49:01.570 に答える