1

私は以下のコードとその動作を身に着けています.しかし、行がクリックされたときに行番号が必要であり(Ajaxは大丈夫だと思います)、同じページのphpコードに渡します。私はそれがうまくいったJavaScriptを試しましたが、私が望む方法ではありませんでした。それがAjaxにあるなら、それはより良いです。どんな助けでも感謝します:)

if(isset($_POST['search'])){
$search=mysqli_query($con,"SELECT * FROM bus_fares WHERE route_no='$_POST[route_no]'");
$num_rows = mysqli_num_rows($search);
$search1=mysqli_query($con,"SELECT fare FROM fare  limit $num_rows ");
$x = 0;
echo" <table  id='my_table'><tr><th>Fare Stage</th>
            <th>Location</th>
            <th>Fare</th>
        </tr>";

while($row=mysqli_fetch_assoc($search) and $row1=mysqli_fetch_assoc($search1)){
echo"<tr>";
echo"<td>".$x."</td>";
echo"<td>".$row['location']."</td>";
echo"<td>".$row1['fare']."</td>";
echo"</tr>";
$x++;
}
echo"</table>"; 
}
4

2 に答える 2

0

本当に必要なのは、ビジュアル データをテーブルに格納するだけでなく、ある種のメタ データも格納することです。これを実現するにはいくつかの方法があります。

方法 #1: (ab) idorclass属性を使用する:

結果の HTML は次のようになります。

<!-- example with the id-attribute: -->
<tr id="mysql_row_1"> ... </tr>
<tr id="mysql_row_2"> ... </tr>

<!-- example with the class-attribute: -->
<tr class="mysql_row_1"> ... </tr>
<tr class="mysql_row_2"> ... </tr>

これは両方とも有効な HTML を生成しますが、実装されていない目的のために属性タグを悪用することになります。これは一般的に悪いと見なされます。複数の値を保存する必要がある場合を想像してください。複数のクラスを割り当てることもできますが、その場合は id-tag で行き詰まります。したがって：これをしないでください！

この解決策を実現するには、次のようにコードを変更する必要があります: (行番号$xとしての値が必要だと思います。)

while ($row=mysqli_fetch_assoc($search) and $row1=mysqli_fetch_assoc($search1)) {
    echo '<tr class="mysql_row_'.$x.'" onclick="getRowNumber()">';
    echo "<td>".$x."</td>";
    echo "<td>".$row['location']."</td>";
    echo "<td>".$row1['fare']."</td>";
    echo "</tr>";
    $x++;
}

JavaScript の部分:

function getRowNumber() {
    var rowNumber = this.className.replace("mysql_row_",""); // fetches the classname and removes the extra-strings
    alert(rowNumber);  // alerts "1", "2", ...
}

方法 #2:data-*属性を使用します。

このソリューションは HTML5 に有効です。互換性に関する追加情報がある場合は、追加してください。

HTML コードは次のようになります。

<tr data-mysql_row_number="1" onclick="getRowNumber()"> .... </tr>
<tr data-mysql_row_number="2" onclick="getRowNumber()"> .... </tr>

そして変更されたJavaScript：

function getRowNumber() {
    alert(this.getAttribute("data-mysql_row_number")); // alerts "1", "2", ...
}

data-*これにより、完全に有効な HTML(5) コードも生成され、必要な数の属性を指定できるため、無限に無限の量の情報を保存できます。

方法 #3: 非表示<input>フィールドを使用する:

結果の HTML コード:

<tr onclick="getRowNumber()">
    <td>
        Normal content of this field
        <input type="hidden" name="mysql_row_number" value="1"/>
    </td>
</tr>

そして、値を取得するための JS コード:

function getRowNumber() {
    var rowNumber = this.getElementsByName('mysql_row_number')[0].value;
    alert(rowNumber); // alerts "1", "2", ...
}

<input>これも有効な HTML を生成しますが、フィールド内のデータはある種の緩いものであり、行に直接接続されていないため、私の意見では意味的に正しくありません。<input>さらに、同じ名前で複数のフィールドを作成できます。

  • 方法 2 ( ) をお勧めしますdata-*。これは最も柔軟なソリューションであり、メタデータを格納するように設計された属性を使用するためです。
  • 方法 #1 は、すべての (古い) ブラウザーで最も信頼性が高く機能します。タグを一意に保つ限り、すべてのブラウザーが JS を介してidor属性へのアクセスをサポートしているためです。classid
  • 方法 #3 は、古いブラウザーでも非常に信頼性があります。
于 2013-04-17T16:20:11.947 に答える
0

代わりにecho"<tr>";：

echo "<tr id='row_".$row['id']."'>";

次に、tr がクリックされたら、script タグ内のjQuery$(this)[0].idを使用してそのように取得します ( jQueryが含まれていることを確認してください。これは強力な JS ライブラリです。追加情報については、Google で検索してください)。

<script>
$("#my_table").on("click", "tr", function(){
  alert($(this)[0].id.replace("row_", ""));
});
</script>
于 2013-04-17T16:16:11.243 に答える