Question

我已经穿了下面的代码和它的工作。但是当我点击ROW（希望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>"; 
}

Answer 1

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

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

然后当点击一个tr时，只需在脚本标记内检索$(this)[0].id，就像jQuery一样（确保包含jQuery，它是一个功能强大的JS库，google for additional信息）：

<script>
$("#my_table").on("click", "tr", function(){
  alert($(this)[0].id.replace("row_", ""));
});
</script>

Answer 2

您真正想要的不仅是将可视数据存储在表中，还存储某种元数据。有几种方法可以实现这一目标。

方法＃1：（ab）使用id或class属性：

生成的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的值为rownumber。）

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在所有（较旧的）浏览器中运行最可靠，因为只要您保留{{1}，所有浏览器都支持通过JS访问id或class属性} tag unique。
使用旧版浏览器，方法＃3也非常可靠。

使用Ajax获取行号onclick

2 个答案: