js 拼写 html 调用后台数据，onclick调用函数

最新推荐文章于 2023-07-10 15:37:20 发布
最新推荐文章于 2023-07-10 15:37:20 发布
阅读量1k 收藏
点赞数
分类专栏： javascript vue 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28586135/article/details/127315113
版权

最近，项目开发发现有一些效果，需要自己在js下拼接html代码，做出想要的效果，但是分成两种：一种是html页面，这是多年前写静态页面时遇到一些问题，现在突然想起来，另一种是vue页面，这是最近遇到的一种情况。
我们的项目现在有一个页面搜索功能，集成了页面的好多模块，因为公司问题所以不在这举例了，我们需要请求多个接口、不同的展示方式和排序问题，那问题就来了，第一种方案是没有在js里面拼接html代码，把请求的数据都放到一个数组里面，在通过循环放到页面里面，发现这样偶爱徐有问题，后来我们就想到在js里面拼html代码，整体拼接好后，再通过v-html在页面上展示。发现这个可以行同。
行了不多说了，直接上代码把。

第一种：html页面js拼接html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>

</head>

<body>
    <div class="attachment">
        <div class="upload">
            <div class="attachment-title clearfix">
                <div class="fileId" style="display:none;">ID</div>
                <div class="fileName" style="width:40%">名称</div>
                <div class="fileSize" style="width:10%">重量</div>
                <div style="width:10%">购买人</div>
                <div style="width:20%">购买时间</div>
                <div style="width:10%">操作</div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</body>
<script src="jquery.min.js"></script>
<script>
    // 附件展示
    var data = [{
        "id": 0,
        "filePath": "/opt/images/0.png",
        "fileName": "苹果",
        "updatorName": "张三",
        "updateTime": "2022/06/11 10:37:04",

    }, {
        "id": 1,
        "filePath": "/opt/images/1.png",
        "fileName": "香蕉",
        "updatorName": "李四",
        "updateTime": "2022/06/11 10:37:04",

    }]

    new contentFunction(data)

    function contentFunction(data) {
        var str = '<div class = "attachment-content" >'
        for (var d = 0; d < data.length; d++) {
            var KbSize = data[d].fileSize / 1024
            str += '<div class="file-progress clearfix"><div class="fileId" style="display:none;">'
            str += data[d].id + '</div><div class="fileName" style="width:40%"><a onclick="previewFunction(\''
            str += data[d].filePath + ' \')" style="cursor:pointer;color:#337ab7;white-space: nowrap;"><span>'
            str += data[d].fileName + '</span></a></div><div class="fileSize" style="width: 10%;">'
            str += KbSize.toFixed(2) + 'kb</div><div class="filePeople" style="width: 10%;">'
            str += data[d].updatorName + '</div><div class="fileTime" style="width: 20%;">'
            str += data[d].updateTime + '</div><div class="fileDownLoad operate" style="width: 10%;"><a onclick="downloadRow('
            str += data[d].id + ')" style = "cursor:pointer;color:#337ab7;white-space: nowrap;" > 下载 </a></div >'
            str += '</div>'
        }
        str += '</div>'
        $('.content').html(str)
    }
    // 下载
    function downloadRow(id) {
        alert(id);
    }
    // 预览
    function previewFunction(filePath) {
        alert(filePath)
    }
</script>

</html>
<style>
    .clearfix:after {
        content: ".";
        height: 0px;
        display: block;
        visibility: hidden;
        clear: both;
    }
    
    .clearfix {
        zoom: 1;
    }
    
    .attachment .upload .attachment-title>div {
        height: 100%;
        line-height: 40px;
        padding-left: 5px;
        float: left;
        border-collapse: collapse;
        border-top: 1px solid rgb(221, 221, 221);
        border-bottom: 1px solid rgb(221, 221, 221);
        font-size: 14px;
        font-weight: 400;
        color: rgb(51, 51, 51);
        text-align: center;
        background: #fafafa;
    }
    
    .attachment .upload .attachment-title>div:not(:last-child),
    .attachment .upload .file-progress>div:not(:last-child) {
        border-right: 1px solid #ccc;
    }
    
    .attachment .upload .file-progress>div {
        float: left;
        padding-left: 5px;
        background-color: transparent;
        border-bottom: 1px solid rgb(221, 221, 221);
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        z-index: 10;
    }
    
    .file-progress .downCheck,
    .file-progress .downCheckOne,
    .file-progress .fileSize,
    .file-progress .filePeople,
    .file-progress .fileTime,
    .file-progress .fileDownLoad {
        text-align: center;
    }
    
    .downLoads {
        background: url(./1.jpg) no-repeat left;
        height: 28px;
        width: 91px;
        text-align: right;
        cursor: pointer;
        line-height: 28px;
        font-size: 14px;
        margin: 10px 0 10px 10px;
        padding-right: 5px;
    }
</style>

第二种：vue页面

<template>
    <div> 
      <div class="attachment">
        <div class="upload">
            <div class="attachment-title clearfix">
                <div class="fileId" style="display:none;">ID</div>
                <div class="fileName" style="width:40%">名称</div>
                <div class="fileSize" style="width:10%">重量</div>
                <div style="width:10%">购买人</div>
                <div style="width:20%">购买时间</div>
                <div style="width:10%">操作</div>
            </div>
            <div class="content">
              <span v-for="(aItems,aIndexs) in data" :key="aIndexs">
                <span v-html="aItems"></span>
              </span>
            </div>
        </div>
    </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return { 
        data: [],
        htmldata:[{
          "id": 0,
          "filePath": "/opt/images/0.png",
          "fileName": "苹果",
          "updatorName": "张三",
          "updateTime": "2022/06/11 10:37:04",
        }, {
          "id": 1,
          "filePath": "/opt/images/1.png",
          "fileName": "香蕉",
          "updatorName": "李四",
          "updateTime": "2022/06/11 10:37:04",
        }]
      };
    },
    mounted () {
      this.htmlFunction();
    },
    created() {
      window.downloadRow = this.downloadRow
      window.previewFunction = this.previewFunction
    },
    methods: {
      htmlFunction(){
        var htmlArrays = []
        this.htmldata.forEach((value,index)=>{
          var KbSize = this.htmldata[index].fileSize / 1024
          var str = '<div class = "attachment-content" >'
          str += '<div class="file-progress clearfix"><div class="fileId" style="display:none;">'
          str += this.htmldata[index].id + '</div><div class="fileName" style="width:40%"><a onclick="previewFunction(\''
          str += this.htmldata[index].filePath + ' \')" style="cursor:pointer;color:#337ab7;white-space: nowrap;"><span>'
          str += this.htmldata[index].fileName + '</span></a></div><div class="fileSize" style="width: 10%;">'
          str += KbSize.toFixed(2) + 'kb</div><div class="filePeople" style="width: 10%;">'
          str += this.htmldata[index].updatorName + '</div><div class="fileTime" style="width: 20%;">'
          str += this.htmldata[index].updateTime + '</div><div class="fileDownLoad operate" style="width: 10%;"><a onclick="downloadRow('
          str += this.htmldata[index].id + ')" style = "cursor:pointer;color:#337ab7;white-space: nowrap;" > 下载 </a></div >'
          str += '</div>'
          str += '</div>'
          htmlArrays.push(str)
        });
        this.data = htmlArrays;
      },
      // 下载
      downloadRow(id){
          alert(id);
      },
      // 预览
      previewFunction(filePath){
          alert(filePath)
      },
    },
  };
  </script>
  <style>
  .clearfix:after {
      content: ".";
      height: 0px;
      display: block;
      visibility: hidden;
      clear: both;
  }
  
  .clearfix {
      zoom: 1;
  }
  
  .attachment .upload .attachment-title>div {
      height: 100%;
      line-height: 40px;
      padding-left: 5px;
      float: left;
      border-collapse: collapse;
      border-top: 1px solid rgb(221, 221, 221);
      border-bottom: 1px solid rgb(221, 221, 221);
      font-size: 14px;
      font-weight: 400;
      color: rgb(51, 51, 51);
      text-align: center;
      background: #fafafa;
  }
  
  .attachment .upload .attachment-title>div:not(:last-child),
  .attachment .upload .file-progress>div:not(:last-child) {
      border-right: 1px solid #ccc;
  }
  
  .attachment .upload .file-progress>div {
      float: left;
      padding-left: 5px;
      background-color: transparent;
      border-bottom: 1px solid rgb(221, 221, 221);
      line-height: 40px;
      font-size: 14px;
      font-weight: 400;
      z-index: 10;
  }
  
  .file-progress .downCheck,
  .file-progress .downCheckOne,
  .file-progress .fileSize,
  .file-progress .filePeople,
  .file-progress .fileTime,
  .file-progress .fileDownLoad {
      text-align: center;
  }
  
  .downLoads {
      /* background: url(./1.jpg) no-repeat left; */
      height: 28px;
      width: 91px;
      text-align: right;
      cursor: pointer;
      line-height: 28px;
      font-size: 14px;
      margin: 10px 0 10px 10px;
      padding-right: 5px;
  }
</style>

onclick调用函数：
onclick调用函数时，如果在vue中应该在 created()里面声明一下， 否则就不能调用这个函数，代码如下：

created() {
      window.downloadRow = this.downloadRow
      window.previewFunction = this.previewFunction
},

还有要注意的就是onclick调用函数时传的值应该是字符串，注意单引号和双引号的嵌套和’'转换符的应用，其实例子面都有。
还有问题请留言，谢谢

Baifu paste
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中的click函数,如何在HTML中使用onclick调用此函数？
weixin_42131785的博客
06-27 2863
不要使用。如果您正在使用jQuery，请使用selectors获取元素并设置event listener。$('button').click(function(){...});你发布的代码有些愚蠢，而且不易阅读。它可以使用重构。如果你坚持要离开它，你可以这样做......：$(document).ready(function () {function Test() {var that = this...
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
10-21
例如，`addEventHandler(element, type, handler)`方法中，`handler`是事件处理函数，而`false`应该位于方法调用的末尾。解决方法是理解并记住每个参数的具体含义和顺序。 2. **拼写错误**：在IE事件处理程序的分支...
html 标签内部onclick调用原理 及指定匿名函数
Dave_lzw的博客
11-08 2500
onclick函数内部包含着指定给onclick的函数，所以当触发了onclick事件的时候，onclick函数就执行，这时候因为fn在onclick函数内部，才得以执行。因此指定要加括号。 function onclick(event) { fn(); } 不加括号执行的话就是： function onclick(event) { fn; } 因此不会执行fn； 当写出匿名函数时，也要加上括号才会被执行。 var pre_str = '<a class="Warning_Table" οn
html调用onclick的Js,HTML / JS-从index.js onclick调用函数
weixin_39583751的博客
06-05 373
我想在我的function.js中从index.js内调用一个函数，但是因为它链接到浏览器，所以我不能使用import或require？我有一个index.js，index.html和另一个functional.js文件。function.js文件由index.html使用，在此文件中，在特定情况下附加一些html，我想做的是onclick调用一个函数，但是从我的index.js文件中调用此函数，...
js中button的onclick事件上送两个参数到后台，完整前后端代码示例
qq_28204711的博客
02-02 9132
前言 这次写博客的原因就是自己在学习过程中，想通过点击按钮，然后给后台传递更新表的参数，当时我查阅很多网上的文章，遇到了很多问题，基本上他们给出的方案都是很简单的解答，但是我的是根据后端返回的数据，动态的生成前端列表，所以那种简单的设置ID的方法不适用，我也费很大力气才解决的，所以，把完整的前后端代码都分享给大家，希望能够给大家带来帮助。 效果图 以上是最后的基本界面图，我的目标就是可以通过点击更新状态按钮，将列表中的任务加载日期和任务状态返回给后台，然后后台接收到数据后给前端返回success， 在执行
谈谈建立一个JavaScript函数如何在html里“onclick”调用。
baiye13716的专栏
08-18 299
首先说说如何点击一个a标签或者其他元素获取塔本身的文本！ javascript函数 <script> function function_name(men) { alert(men); } </script> function_name 是一个函数名字！ men 是一个参数，这里是形参！（意思就是，学数学方程式的 X Y 这种，没...
html2.rar_This Love
09-23
可能有一个表单，用户输入数值，然后通过调用JavaScript函数进行加法运算并显示结果。 3. JAVA.HTML: 虽然文件名有"JAVA"，但HTML通常不直接与Java语言交互，除非是在讨论Java Applets（已过时的技术）或者使用...
JavaScript判断用户名和密码不能为空的实现代码
10-22
这里，`eval_r`函数（可能是`eval`的一个拼写错误）用于执行字符串形式的JavaScript代码，将焦点设回为空的输入字段，以便用户能够直接看到并修改。 最后，如果`errMsg`仍然为空，即没有发现任何错误，那么就提交...
ACCP 5.0 HTML复习测试题
05-15
- 根据题目描述，需要完成一个函数 `showContent`，当列表框发生 `onChange` 事件时调用该函数，并根据选择的不同值显示相应的说明信息。 - 提供的代码片段展示了 `showContent` 函数的一部分，但是缺少了关键的...
javascript实现的简单的表单验证
10-23
5. 绑定事件监听：通过在提交按钮上添加`onclick="return chkform()"`事件处理器，当用户点击提交按钮时，会调用`chkform()`函数。`return`关键字用于确保函数返回值可以决定表单是否继续提交。 6. 表单验证的必要...
js中拼接html中有onclick方法且传参的写法
热门推荐
asdfghjklor的博客
01-17 1万+
参数如果为数字，可以直接写； 参数如果为数字和字母的组合或者只有字母，需要在参数前面加“   \’”,才能读取到。 代码如下 $("table tr#tableTitle").after(                                     '' +                                     '' + strChange(v.ba
vue拼接html中onclick的触发方式，模版字符串拼接点击事件在vue项目中不生效问题
最新发布
蓝胖子的博客
07-10 2212
vue拼接html中onclick的触发方式，模版字符串拼接点击事件在vue项目中不生效问题
html function效果,在HTML中，从onClick属性调用jQuery方法_function_开发99编程知识库
weixin_26731219的博客
06-09 186
我比較新的落實JQuery貫穿整個系統，我也享有機會。我無意中發現了一個問題我很想找到正確的解決的。我想做的是一個簡單的case示例如下：我有一個按鈕在頁面上，然後在click事件我想調用一個jquery函數我定義了。下面是我的代碼用於定義我的方法( Page jsblocks ) ：(function($) {$.fn.MessageBox = function(msg) {alert(msg)...
html onclick="function"放入参数
飞翔的熊blabla
11-03 3380
html标签中onclick中使用带参数function，EL表达式参数必须带引号
alex_fung的博客
03-03 7955
如：function名为funcNoticeView(id) onclick="funcNoticeView('${xwgg.id}')" ${xwgg.id}必须用引号括起来，不然会没反应
js将ajax返回的数据作为参数传入onclick函数
qq_43737121的博客
05-07 1575
项目中用到了将ajax返回的数据作为参数传入onclick函数，作为参数，之前返回的一直是数字，所以用写法： var name = ret[index].name; strHtml+= '<tr id=' + ret[index].name + ' οnclick="showDetail(' + name + ')">'; 没有问题，但是当返回的name是包含数字字母组合、纯字母...
js拼接html时，onclick传参问题
qq_43654065的博客
07-20 1796
3.使用JSON.stringify()将对象转换成json字符串，但是依然会报错unexpectedendofinput，该错误是因为json字符串的双引号和onclick的双引号冲突，需要将json字符串转成单引号字符串。如果直接使用对象，页面渲染的时候，onclick的参数为（[onjectObject]）。对象是不能拼接的，拼接的必须是字符串，因此需要将对象转变为字符串。1.将对象拆开，只穿需要传递的参数（参考第二点，需要转义）...
js中拼接html文档之onclick函数处理
08-17 2186
拼接html文档时，对于onclick如何拼接： 1.直接拼接onclcik函数  function setNameplate(obj){ var str = ""; var name = $(obj).prev("span").text(); str = '' + '确定' + ' + '\')">取消'; $(obj).parent().html(str); } 2
html中a标签中的onclick和href的使用
zoohouse的专栏
08-23 4523
下面代码则执行了subgo()函数， 点我 在这里，javascript:void(0),没启实质上的作用，它仅仅是一个死链接，执行的函数是subgo()。 点我与点我区别。 实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ，而javascript:vo
vuex调用映射函数中state的数据为undefined
04-02
如果你在调用映射函数中的state数据时遇到了undefined，可能有以下几个原因： 1. 模块化的vuex 如果你是在使用模块化的vuex，需要在映射函数中指定模块名称。例如： ``` computed: { ...mapState('moduleName', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值