Ajax-Div表行InnerHTML

Question

我正在使用AJAX更改我的DIV表行的innerHTML。

問題是，當我單擊按鈕時，innerHTML僅更改第一個單元格，而我希望它更改整個表行。

我在這里搜索了已經回答的問題，但是找不到與我的問題匹配的問題。 關於我在做什么錯的任何想法？

AJAX功能（改編自W3schools.com）

function edit_attendee(str, str2, str3) {
    if (str=="") {
        document.getElementById('three' +str).innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('three' +str).innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "/manage/edit_attendee.phpsid=" + str2 + "&tid=" + str + "&snum=" + str3, true);
    xmlhttp.send();
}

表格行

<div id="container1" style="padding-left:20px;paddingright:20px;width:915px;display: table;">

<?php foreach $rowing as $row{ ?>
  <div id="three<?php echo $row['id']; ?>" style="display: table-row;">
    <div  style="display: table-cell;">1.</div>
    <div  style="display: table-cell;">2.</div>
    <div  style="display: table-cell;">3.</div>
    <div  style="display: table-cell;">4.</div>
    <div  style="display: table-cell;"><button type="button" style="width:60px;align:center;" onclick="edit_attendee(<?php echo $row['id']; ?>,<?php echo $choice; ?>,<?php echo $snum; ?>);return false;">edit</button</div>
  </div>

<?php } ?>

</div>

Answer 1

該行document.getElementById('three' +str).innerHTML = xmlhttp.responseText; 僅填充'three'+str元素。 您必須將AJAX響應分配給變量並將其拆分。

或者，更好的是，您可以修改edit_attendee.php腳本以返回整個div id=three[id] innerHTML，並將其值分配給各個列。

這或多或少是在edit_attendee.php中的操作：

$id = filter_var($_GET['id'], FILTER_SANITIZE_STRING); // id comes from the query
$choice = filter_var($_GET['choice'], FILTER_SANITIZE_STRING); // choice comes from the query
$snum = filter_var($_GET['snum'], FILTER_SANITIZE_STRING); // snum comes from the query
$first = 'column 1';
$second = 'column 2';
$third = 'column 3';
$fourth = 'column 4';
$fifth = "<button type=\"button\" onclick=\"edit_attendee($id, $choice, $snum);return false;\" value=\"edit\" />";
echo "<div>$first</div>
<div>$second</div>
<div>$third</div>
<div>$fourth</div>
<div>$fifth</div>";

我建議您避免直接在HTML代碼中使用樣式：分配類要好得多，因為代碼更易於管理。

出於同樣的原因，最好避免在代碼之間使用過多的php開關標簽：單回顯打印整行代碼更容易調試。

分配給您的“ three_something”行的class="MyRow"將需要以下CSS：

.MyRow {
   display: table-row;
}

使用此類，您可以輕松地為CSS包含的每個<div>分配其他樣式：

.MyRow div {
    display: table-cell;
}

然后，用於生成您的頁面的php將是：

<?php
foreach ($rowing as $row) { 
echo "<div id=\"three${row['id']}\" class=\"MyRow\">
     <div>1.</div>
     <div>2.</div>
     <div>3.</div>
     <div>4.</div>
     <div><button type=\"button\" onclick=\"edit_attendee(${row['id']}, $choice, $snum); return false;\" value=\"edit\" /></div>
</div>";
}
?>

${row['id']}形式的變量允許您在引號之間編寫它們，而無需打開和關閉引號，因此代碼更具可讀性。 有關更多詳細信息，請參見https://php.net/manual/zh-CN/language.types.string.php#language.types.string.parsing.complex 。

一個小題外話，以更快地解釋{}大括號：

$glut = 'but';
echo "$glutton" // shows nothing, $glutton is not defined
echo "${glut}ton" // shows "button"

返回到您的Javascript代碼段，並進行以下修改： document.getElementById('three' +str).innerHTML = xmlhttp.responseText; 現在可以工作了，因為它從AJAX調用中接收到5個內部<DIV> 。