[英]how to get html content of a div element using jquery
I have a dynamically created html table so I need to get some of the cell values in to jquery variables I tried next() nextAll() cosesst() but nothing work for me. 我有一个动态创建的html表,因此我需要将某些单元格值输入到我尝试过next()nextAll()cosesst()的jquery变量中,但对我没有任何帮助。
this is my table created using php 这是我用PHP创建的表
if ($result = $hongcon->query($query)) {
while ($row = $result->fetch_object()) {
echo "<tr>";
echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
echo "<td><div id=\"id\" style=\"padding: 10px; \">$row->id</div></td>";
echo "<td><div style=\"padding: 10px;\" class=\"edite\">$row->itemName</div></td>";
echo "<td><div id=\"iid\" style=\"padding: 10px;\">$row->iId</div></td>";
echo "<td><div id=\"pid\" style=\"padding: 10px;\">$row->pId</div></td>";
echo "<td><div id=\"image\" style=\"padding: 10px;\">$row->itemImage</div></td>";
echo "<td><div id=\"desc\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
echo "<td><div id=\"pdfone\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
echo "<td><div id=\"pdftwo\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
echo "<td><div id=\"pdfthree\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
echo "</tr>";
};
and I have following jquery function in my head section. 我的头部有以下jquery函数。 this code is for testing.
此代码用于测试。 always it gives me undefined.
总是给我不确定的。
iid, pid, desc are the id that I want to get the values to variables. iid,pid,desc是我想要获取变量值的id。
$(document).ready(function() {
$("div.edite").on("dblclick", function() {
OriginalText = $(this).html();
$id = $(this).next("td div").find("#iid").html();
alert($id);
});
});
You have a bad mistake in your code: You assign an ID for each row in the table. 您的代码有一个严重错误:您为表中的每一行分配一个ID。 So your IDs are NOT unique but they should.
因此,您的ID并非唯一,但应该唯一。
So try to make a difference: Use css-classes instead of IDs. 因此,请尝试有所作为:使用CSS类而不是ID。 Possible:
可能:
<table><!-- ... --> <tr>
<td class="mytable-td mytable-col-iid">...</td>
<td class="mytable-td mytable-col-pid">...</td>
<!-- ... -->
<tr></table>
That design has two advantages: 该设计具有两个优点:
mytable-td
mytable-td
类中“隐藏”您的填充 $('mytable tr').get(rowIndex).find('.mytable-col-iid').html()
$('mytable tr').get(rowIndex).find('.mytable-col-iid').html()
来通过jQuery获取值$('mytable tr').get(rowIndex).find('.mytable-col-iid').html()
You have this: 你有这个:
$id = $(this).next("td div").find("#iid").html();
But that won't work because there is no td
that is next from the div.edite
. 但这是行不通的,因为
div.edite
没有下一个td
。 And also, you won't be able to find the div#iid
inside the next td div
because it is that div
already. 而且,您将无法在下一个
td div
找到div#iid
,因为它已经是该div
。 Finally, you should avoid using IDs in this code because you will end up with duplicates which won't work. 最后,您应该避免在此代码中使用ID,因为最终将导致重复项无法使用。 Change the above line to this and it should work:
将上面的行更改为此,它应该起作用:
$id = $(this).closest("TR").next("td div").html();
ids should be unique within the entire document. ID在整个文档中应该是唯一的。 I think you should change the code a bit adding a suffix to each id (pj the number of the row) Anyway, you could select those values with a something like
$(this).parent().parent().find("#iid").html();
我认为您应该对代码进行一些更改,以便为每个id添加后缀(pj为行号)。无论如何,您可以使用
$(this).parent().parent().find("#iid").html();
Instead of this 代替这个
$id = $(this).next("td div").find("#iid").html();
Use like this 这样使用
$id = $(this).parent().siblings().find("#iid").html();
You should change your php code in order to generate table rows with unique numeric identifier 您应该更改php代码,以生成具有唯一数字标识符的表行
<?php
if ($result = $hongcon->query($query)) {
while ($row = $result->fetch_object()) {
echo "<tr>";
echo "<td><div style=\"padding-top: 10px;\"><a class=\"delete\" onclick=\"delete_product($row->id)\">Delete</a></div></td>";
echo "<td><div id=\"id_$row->id\" style=\"padding: 10px; \">$row->id</div></td>";
echo "<td><div style=\"padding: 10px;\" class=\"edite\" editId=\"$row->id\">$row->itemName</div></td>";
echo "<td><div id=\"iid_$row->id\" style=\"padding: 10px;\">$row->iId</div></td>";
echo "<td><div id=\"pid_$row->id\" style=\"padding: 10px;\">$row->pId</div></td>";
echo "<td><div id=\"image_$row->id\" style=\"padding: 10px;\">$row->itemImage</div></td>";
echo "<td><div id=\"desc_$row->id\" style=\"padding: 10px;\">$row->itemDescription</div></td>";
echo "<td><div id=\"pdfone_$row->id\" style=\"padding: 10px;\">$row->pdfOne</div></td>";
echo "<td><div id=\"pdftwo_$row->id\" style=\"padding: 10px;\">$row->pdfTwo</div></td>";
echo "<td><div id=\"pdfthree_$row->id\" style=\"padding: 10px;\">$row->pdfThree</div></td>";
echo "</tr>";
};
?>
JQUERY: JQUERY:
$(document).ready(function() {
$("div.edite").on("dblclick",function() {
$iid = "iid_"+$(this).attr('editId');
OriginalText = $(this).html();
$id = $("#"+$iid).html();
alert($id);
});
});
Use this instead: 使用此代替:
$id = $(this).parent("td div").find("#iid").html();
Because in your current code you have: 因为在当前代码中您具有:
$id = $(this).next("td div").find("#iid").html();
And that wouldn't work because there is no td
next to the div
. 那是行不通的,因为
div
旁边没有td
。 Due to that, you won't be able to find div#iid
inside the next td div
. 因此,您将无法在下一个
td div
找到div#iid
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.