使用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

回答

相關問題