单击列表按钮时，从列表中获取内部HTML - Get Inner HTML from listing when its button is clicked

我有一个列出位置的表，以及一个可以将位置单独添加到列表中的部分。单击按钮时，它会将列表项的innerHTML更改为结果的innerHTML。

每个结果都有自己的按钮，我需要这个函数来根据单击的按钮提取正确的HTML。我还需要脚本来切换它根据上一个列表项是否已经更改而更改的列表项。

现在，我只能获得将第一个列表项的html切换到表中第一个结果的html的函数。当点击这三个不同的按钮时，我需要能够将三个不同项目添加到我的列表中。

这是我迄今为止的代码。如有任何帮助，我们将不胜感激。

    <div class="row" align="center">
    <h2>Create a Dilly</h2>
    <div class="row">
    <div class="col-xs-4">
    <img src="" id="placeaimg" width="80%"><br/>
    <p style='visibility: hidden;' id='placeaid'></p>
    <h3 id="placeaname">Place One Name</h3>
    <p id="placeaaddress">Place Address</p>
</div>
<div class="col-xs-4">
<img src="" id="placebimg" width="80%"><br/>
<p style='visibility: hidden;' id='placebid'></p>
<h3 id="placebname">Place Two Name</h3>
<p id="placebaddress">Place Address</p>
</div>
<div class="col-xs-4">
<img src="" id="placecimg" width="80%"><br/>
<p style='visibility: hidden;' id='placecid'></p>
<h3 id="placecname">Place Three Name</h3>
<p id="placecaddress">Place Address</p>
</div>
</div>
<br/>
<a class="btn btn-lg btn-warning" href="dilly.php">Create</a>
</div>
<script>
function addToDilly(){
    document.getElementById("placeaid").innerHTML = document.getElementById("placeid").innerHTML;
    document.getElementById("placeaname").innerHTML = document.getElementById("placename").innerHTML;
    document.getElementById("placeaaddress").innerHTML = document.getElementById("placeaddress").innerHTML;
    document.getElementById("placeaimg").src = document.getElementById("placeimg").src;
    }
</script>
 <table class="table table-striped">
<?php
$list = mysql_query("SELECT * FROM Places WHERE city='Houston' AND state='TX'");
while($row = mysql_fetch_object($list))
{
    echo "<tr>";
    echo "<td>";
    echo "<div class='row'>";
    echo "<div class='col-xs-4'>";
    echo "<p style='visibility: hidden;' id='placeid'>$row->id</p>";
    echo "<a href='place.php?id=$row->id'><img id='placeimg' src='$row->img' height='150px'></a><br/>";
    echo "</div>";
    echo "<div class='col-xs-8'>";
    echo "<h3 id='placename'><strong><a href='place.php?id=$row->id'>$row->name</a></strong></h3>";
    echo "<p id='placeaddress'>$row->address</p>";
    echo "</div>";
    echo "</div>";
    echo "<div class='row'>&nbsp;</div>";
    echo "<div class='row'>";
    echo "<a class='btn btn-lg btn-warning' onclick='addToDilly()'>Add To Dilly</a>";
    echo "</div>";
    echo "</td>";
    echo "</tr>";
}
?>
</table>

试试这个，但不要忘记对页面调用jquery

<script>
$(document).ready(function(){
addToDilly = function(uniqId){
    $("#placeaid").html( $("#"+uniqId+" .placeid").html() );
    $("#placeaname").html( $("#"+uniqId+" .placename").html() );
    $("#placeaaddress").html( $("#"+uniqId+" .placeaddress").html() );
    $("#placeaimg").attr("src" , $("#"+uniqId+" .placeimg").attr("src") );
    }
});
</script>
 <table class="table table-striped">
<?php
$list = mysql_query("SELECT * FROM Places WHERE city='Houston' AND state='TX'");
while($row = mysql_fetch_object($list))
{
    echo "<tr>";
    echo "<td id='row-$row->id'>"; // or some unique identifier to this row
    echo "<div class='row'>";
    echo "<div class='col-xs-4'>";
    echo "<p style='visibility: hidden;' class='placeid'>$row->id</p>";
    echo "<a href='place.php?id=$row->id'><img class='placeimg' src='$row->img' height='150px'></a><br/>";
    echo "</div>";
    echo "<div class='col-xs-8'>";
    echo "<h3 class='placename'><strong><a href='place.php?id=$row->id'>$row->name</a></strong></h3>";
    echo "<p class='placeaddress'>$row->address</p>";
    echo "</div>";
    echo "</div>";
    echo "<div class='row'>&nbsp;</div>";
    echo "<div class='row'>";
    echo "<a class='btn btn-lg btn-warning' onclick='addToDilly(''row-$row->id'')'>Add To Dilly</a>";// again pass that unique id to function
    echo "</div>";
    echo "</td>";
    echo "</tr>";
}
?>
</table>

我只更改了您的javascript和php代码，请确保这些元素存在于您要分配新值的位置。希望这能奏效。