Javascript 单击列表按钮时从列表中获取内部HTML

我有一个列出的位置表，还有一个部分，可以将这些位置单独添加到列表中。单击按钮时，它会将列表项的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代码，请确保在分配新值的位置存在这些元素。

---

希望这能起作用。

您对不同的元素使用相同的id，这可能会导致错误。如果你可以使用JQuery，我可以用JQuery给你答案，顺便说一句，JQuery既有趣又简单。那将是很棒的@anwerjunaid。它对我不起作用。我确保调用JQuery，甚至在id的前面添加了$row->id，但是按钮不起作用。检查浏览器的控制台，看看有什么错误？粘贴到这里。你必须用我的javascript代码替换你的javascript代码。您可以检查已编辑的代码。