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标签：单个echo打印整行更容易调试。

class="MyRow"分配给您的＆＃34; three_something＆＃34;行将需要此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/en/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>。

Ajax - Div表格行InnerHTML

1 个答案: