009-WebBuilder-Wb.request获取数据库数据并实现列单行显示-非html拼接

天又热了

于 2022-02-08 08:26:08 发布

阅读量182

点赞数

分类专栏： webBuilder 文章标签： html 数据库 javascript

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122817520

版权

webBuilder 专栏收录该内容

10 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
      .center-list-container{
        float:center;
        padding:10px;
      }
      .center-list-title{
        margin-bottom:20px;
      }
      .center-list-header{
        font-size:20px;
        color: rgb(170,177,196);
        padding-bottom:8px;
        border-bottom:5px solid rgb(16,120,173);
        float:left;
        width:20%;
        height:50px;
      }
      .center-list-footer{
        font-size:20px;
        color: rgb(170,177,196);
        padding-bottom:20px;
        border-bottom:5px solid rgb(170,177,196);
        float:left;
        width:80%;
        height:50px;
      }
      .center-list-item-1{
        display:flex;
        align-items:center;
        font-size:16px;
        line-height:20px;
        padding:10px 0;
        border-bottom: 1px solid rgb(237,237,237);
        float:left;
         font-size:16px;
/*         padding-left:100px */
       
      }
      .center-list-item-2{
        display:flex;
        align-items:center;
        font-size:16px;
        line-height:20px;
        padding:10px 0;
        border-bottom: 1px solid rgb(237,237,237);
        float:left;
         font-size:16px;
        padding-left:700px
       
      }
      .center-list-content{
      	
      }
	
    </style>
  </head>
  <body>
    <div class="center-list-container">
      <div class="center-list-title">
        <div class="center-list-header">业务指南</div>
        <div class="center-list-footer"></div>
        <p><p><p><p>
        <div class="center-list-content" id="tableList"> 
          <table class="table">
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

afterrender代码

  Wb.request({
    url: 'm?xwl=demo/combine-module/basic_select',
    //成功后的回调函数
    success: function(resp) {
      console.log("success");
      var obj = Wb.decode(resp.responseText);
      var data = obj.rows;
      var html = '';
      var tbody = document.getElementsByTagName('tbody')[0];
      for (var i = 0; i < data.length; i++) {
        var tr = document.createElement('ul');
        var tdTitle = document.createElement('li');
        var tdAuthor = document.createElement('li');
        var tdTitleType = document.createAttribute("class");
        var tdAuthorType = document.createAttribute("class");
        var trType = document.createAttribute("class");
        var img = document.createElement("img");
        var imgType = document.createAttribute("src");
         var news = data[i];
        var title = news.title;
        var author = news.author;
        var spanTitle = document.createElement('span');
        spanTitle.innerHTML=title;
        var spanAuthor = document.createElement('span');
        spanAuthor.innerHTML=author;
        img.src="wb/images/new符号.png";
//         img.attributes.setNamedItem(imgType);
        
        tr.nodeValue="center-list-content";
        tr.attributes.setNamedItem(trType);
        tdTitleType.nodeValue = "center-list-item-1";
        tdAuthorType.nodeValue = "center-list-item-2";
        tdTitle.attributes.setNamedItem(tdTitleType);
        tdAuthor.attributes.setNamedItem(tdAuthorType);
        tdTitle.appendChild(spanTitle);
        tdTitle.appendChild(img);
        tdAuthor.appendChild(spanAuthor);
        var cellpadding = document.createAttribute("cellpadding");
        cellpadding.nodeValue="50px";
        //td.attributes.setNamedItem(cellpadding);
       
       // tdTitle.innerHTML=title;
        tr.appendChild(tdTitle);
        //tdAuthor.innerHTML=author;
        tr.appendChild(tdAuthor);
        tbody.appendChild(tr);

      }

    },
    error: function(res) {
      console.log("失败");

    }
  });

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009-WebBuilder-Wb.request获取数据库数据并实现列单行显示-非html拼接

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> .center-list-container
复制链接

扫一扫