添加类到表格单元格
AJAX Add Class to Table Cell
我的表单上有两个选择菜单:类型和类别。当用户从类型菜单中选择一些东西时,我希望它然后执行一个PHP脚本,该脚本查询数据库并返回所选类型的匹配类别列表,以便他们从类别菜单中进行选择。
这工作得很好,但我现在想更新它,以便它添加一个类到categoryGroup("成功"或"错误"取决于AJAX的结果)。这是我的表格,有两个单元格:
<div class="form-group">
<label for="title" class="control-label col-sm-3">Type</label>
<div class="input-group col-xs-8">
<select class="form-control" name="type" id="type" onchange="getCategories(this.value)">
<option value="" selected></option>
<option value="Business">Business</option>
<option value="Commercial">Commercial</option>
<option value="Commercial Land">Commercial Land</option>
<option value="Land">Land</option>
<option value="Rental">Rental</option>
<option value="Residential">Residential</option>
<option value="Rural">Rural</option>
</select>
</div>
</div>
<div class="form-group" id="categoryGroup">
<label for="title" class="control-label col-sm-3">Category</label>
<div class="input-group col-xs-8" class="" id="categoryList">
<select class="form-control" name="category" id="category">
<option value="" selected></option>
</select>
</div>
</div>
,这里是我的脚本,正在工作,以取代类别选择菜单与适当的选项从AJAX调用:
<script type="text/javascript">
function getCategories(str) {
if (str == "") {
document.getElementById("categoryList").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("categoryList").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "getPropertyCategories.php?type=" + str, true);
xmlhttp.send();
}
</script>
我不知道如何更新这也添加一个类到categoryGroup id
很基本,但我想你已经明白了要点:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("categoryList").innerHTML = xmlhttp.responseText;
}
var status = xmlhttp.status == 200 ? 'success' : 'error'
var group = document.getElementById("categoryGroup")
group.classList.add(status)
}
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 区分电子表格中的空单元格和0值
- 如何将jQuery/AAJAX结果放入表格单元格
- 在谷歌电子表格中循环单元格
- 使用下拉选择菜单高亮显示一行表格单元格
- 如何通过悬停或点击谷歌电子表格中的单元格来运行自定义功能
- 使用javascript下拉菜单更改表格单元格的颜色
- 表格单元格高度与背景高度匹配
- 在表格单元格中查找超链接
- 谷歌应用程序脚本-onFormSubmit-复制到电子表格中的单元格
- 为什么谷歌应用程序的电子表格setValue函数没有在单元格中设置值
- 数据表 ..如何根据表格的单元格值更改单元格的颜色
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- 在 DIV 中定位表格单元格
- 单击时将表格单元格从范围更改为输入
- 使用 javascript 为 HTML 表格单元格指定颜色
- 将单击表格单元格重定向到其中的
- JQuery insertAfter();移动下一个表格单元格
- 将工作表复制到新的电子表格,将单元格值添加到新电子表格名称的末尾
- 单击并用CTRL+C复制值时高亮显示html表格单元格