使用Ajax获取行编号onclick

我已经穿着下面的代码和其working.But我希望行号单击行（希望Ajax是好的），并将其传递到同一页面的PHP代码。我尝试了JavaScript的工作，BT不以我想要的方式。如果它在Ajax中更好。任何帮助将b gratefull :)使用Ajax获取行编号onclick

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>"; 
}

来源

2013-04-17 Niranjana668

所以你的实际问题是？... – akluth

你仍然需要PHP来检索MySQL值。你可以使用jQuery来点击显示他们 – verbumSapienti

你真的想要的不是将视觉数据存储在您的表格中，但也包含某种元数据。有几种方法可以实现这一点。

方法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。因此：不要这样做！

你不得不改变你这样的代码来实现这个解决方案：（我假设你想为ROWNUMBER的$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-*属性：

这soluti on对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将在所有（较旧的）浏览器中工作最可靠，因为只要您保持id标记的唯一性，它们都可以通过JS支持对id或class属性的访问。方法＃3在旧版浏览器中也相当可靠。

来源

2013-04-17 16:20:11 Zim84

谢谢你们的答复... bt我有点失落在这里。如果你能给我准确的代码做这个功能..只是想获得onclick行号到一个变量中的侧面php代码 – Niranjana668

NP，数据属性是一个不错的主意，但较少兼容跨浏览器;） – Pouki

非常感谢Zim84 for ur grate help ....：D：D真棒 – Niranjana668

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

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

然后点击一个TR时，只检索$(this)[0].id喜欢与jQuery脚本标签内（一定jQuery包括，它是一个功能强大的JS库，谷歌它的其他信息）：

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

来源

2013-04-17 16:16:11 Pouki

我无法得到这个代码工作.... plz帮助 – Niranjana668

看到我的编辑得到它的作品 – Pouki

使用Ajax获取行编号onclick

回答

相关问题