运行javascript不会运行CSS
Run javascript does not run CSS
我需要一些Javascript和CSS的帮助。我有一个脚本,工作良好,但当我执行过滤功能在顶部,我的CSS将不会运行,只有过滤的结果将显示在HTML页面。寻求执行javascript的建议。
<script>
var createTable = function(){
var street = document.getElementById("search-street").value;
var suburb = document.getElementById("search-suburb").value;
var pc = document.getElementById("search-pc").value;
var type = document.getElementById("search-type").value;
var counter=0;
if (street == '' && suburb == '' && pc == '' && type == '') {
for(i=0;i<myArray.length;i++){
var id = myArray[i][4];
if(counter%3==0){
document.write("<div class='row'>");
}
document.write("<div class='col-sm-6 col-md-4'>");
document.write("<div class='thumbnail'>");
document.write("<div class='caption'>");
document.write("<p>" + myArray[i][3] + "</p>");
document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
document.write("</div>");
document.write("</div>");
document.write("</div>");
counter++;
if(counter%3==0){
document.write("</div>");
}
}
} else {
for(i=0;i<myArray.length;i++){
var id = myArray[i][4];
if(counter%3==0){
document.write("<div class='row'>");
}
if(street==myArray[i][0] || suburb==myArray[i][1] || pc==myArray[i][2] || type==myArray[i][3]){
document.write("<div class='col-sm-6 col-md-4'>");
document.write("<div class='thumbnail'>");
document.write("<div class='caption'>");
document.write("<p>" + myArray[i][3] + "</p>");
document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
document.write("</div>");
document.write("</div>");
document.write("</div>");
counter++;
}
if(counter%3==0){
document.write("</div>");
}
}
}
}
createTable();
</script>
不要使用document。编写、使用变量,替换或添加元素中的内容。
试试这个:https://jsfiddle.net/cq14qot3/
var myArray = [["1", "2", "3", "4", "5"],["6", "7", "8", "9", "10"]];
var createTable = function() {
var street = document.getElementById("search-street").value;
var suburb = document.getElementById("search-suburb").value;
var pc = document.getElementById("search-pc").value;
var type = document.getElementById("search-type").value;
var counter = 0;
var outputHTML = '';
if (street == '' && suburb == '' && pc == '' && type == '') {
for (i = 0; i < myArray.length; i++) {
var id = myArray[i][4];
if (counter % 3 == 0) {
outputHTML += ("<div class='row'>");
}
outputHTML += ("<div class='col-sm-6 col-md-4'>");
outputHTML += ("<div class='thumbnail'>");
outputHTML += ("<div class='caption'>");
outputHTML += ("<p>" + myArray[i][3] + "</p>");
outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
outputHTML += ("</div>");
outputHTML += ("</div>");
outputHTML += ("</div>");
counter++;
if (counter % 3 == 0) {
outputHTML += ("</div>");
}
}
} else {
for (i = 0; i < myArray.length; i++) {
var id = myArray[i][4];
if (counter % 3 == 0) {
outputHTML += ("<div class='row'>");
}
if (street == myArray[i][0] || suburb == myArray[i][1] || pc == myArray[i][2] || type == myArray[i][3]) {
outputHTML += ("<div class='col-sm-6 col-md-4'>");
outputHTML += ("<div class='thumbnail'>");
outputHTML += ("<div class='caption'>");
outputHTML += ("<p>" + myArray[i][3] + "</p>");
outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
outputHTML += ("</div>");
outputHTML += ("</div>");
outputHTML += ("</div>");
counter++;
}
if (counter % 3 == 0) {
outputHTML += ("</div>");
}
}
}
document.body.innerHTML = outputHTML;
alert(outputHTML);
}
createTable();
相关文章:
- CSS转换获胜't在没有“setTimeout”的情况下运行
- "npm运行构建:css"不能工作,而当我自己运行脚本时是可以的
- 无法在运行时将CSS样式添加到元素中
- CSS 转换不会在没有 setTimeout 的情况下运行
- 如何在函数运行之前隐藏 CSS
- 脚本点击Css显示属性更改不正常运行Asp.net
- 在CSS完全加载后运行Javascript
- Veritcal下拉Css菜单未按预期运行
- 当使用关键 CSS 时,Jquery 函数不会在加载时运行
- 如何动态更改由 javascript 在运行时生成的 html 的 css
- 运行python SimpleHTTPServer时的Javascript和css文件搜索路径
- 在 IE6 中运行时添加 CSS 规则 - 对象不支持此属性或方法
- CSS和PHP运行exec并返回原始页面
- 在 JavaScript 运行之前重新绘制 CSS(以显示进度指示器)
- 当输入字段上有某些 CSS 类时,Javascript 将不会运行
- 如何在页面加载后立即运行CSS样式更改
- 在JQuery/Javascript中运行CSS
- 运行javascript不会运行CSS
- 如何在没有任何悬停的情况下运行css转换动画
- 自动运行 CSS 更改