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

而不是echo"<tr>";做：

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

然后当单击 tr 时，只需在脚本标签内使用 jQuery 进行检索（确保$(this)[0].id包含jQuery ，它是一个强大的 JS 库，请在谷歌上搜索以获取更多信息）：

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

这也会生成完全有效的 HTML(5) 代码，并允许您存储无限量的信息，因为您可以指定任意数量的data-*属性。

方法#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", ...
}

这也产生了有效的 HTML，但在我看来在语义上并不正确，因为<input>字段内的数据是某种松散的并且没有直接连接到行。另外，您可以创建多个<input>具有相同名称的字段。

  • 我会建议方法 #2 ( data-*)，因为这是最灵活的解决方案，并且使用了旨在存储元数据的属性。
  • 方法 #1 在所有（较旧的）浏览器中最可靠，因为它们都支持通过 JS 访问idorclass属性，只要您保持id标签唯一。
  • 方法#3 对于旧版浏览器也非常可靠。
于 2013-04-17T16:20:11.947 回答