html自定义标签参数
html的input中使用onclick()事件可以向js传递当前标签中的属性
利用input的name属性。制作一个JSON字符串既可以把想传递数据传递给js,js接受后对数据进行处理得到想要的数据。
也可以用html的data-* = “” 的方式向js传递参数
如下例子
品名<input type="text" name="proName" id = "proName" value=""/><br/> 数量<input type="text" name="proCount" /><br/> 单价<input type="text" name="proPrice" id = "proPrice"/><br/> <p color='{"s1":"自定义1","s2":"自定义2"}' data-p="bird" data-obj ='{"s1":"自定义1","s2":"自定义2"}' onclick="getP(this)"> 使用data-*这种方式也可以向js传递自定义参数</p> <p id="selfP"></p> <input name ='{"product":"{{$value.商品名称}}","price":"{{$value.销售金额}}","self":"自定义"}'type="button" value="出库" id="{{$value._id}}" onclick="outProduct(this)"/> <script> function outProduct(data){ //处理函数 let qq = data.name qq = JSON.parse(qq) //接受参数并转换成JSON console.log(typeof(qq))//测试转换成功 console.log(qq.price) let outProName = document.getElementById('proName') let outProPrice = document.getElementById('proPrice') outProName.value = qq.self outProPrice.value = qq.price } function getP(data){ console.log(data.getAttribute("data-p")) //引用自定义的属性getAttribute
let pObj = data.getAttribute("data-obj") //引用自定义的属性getAttribute
pObj = JSON.parse(pObj) console.log(pObj.s1) let selfP = document.getElementById('selfP') selfP.innerHTML = pObj.s1 } </script>
用js也可以给元素添加自定义属性,关键的两个语法一个是设定,一个是引用
var aaa = document.getElementById("idName")
aaa.setAttribute("Sname","value") //设定
aaa.getAttribute('Sname')//引用
这个例子创建一个表格,通过TabClick()方法,将每个表格的索引结合,设置成了td的自定义属性值。,
<table id="table" onclick="TabClick();"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>h</td> <td>i</td> <td>j</td> <td>k</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </table> <script> window.onload=function(){ var table = document.getElementById("table") for(i=0;i<table.rows.length;i++){ for(let j=0;j<table.rows[i].cells.length;j++){ let ii = i.toString() //将表格循环的数字变成字符串 let jj = j.toString() table.rows[i].cells[j].setAttribute('data-rowaa',ii+jj)//为元素添加自定义属性 前面一个是属性名称,后面一个是属性值 console.log(table.rows[i].cells[j].getAttribute('data-rowaa'))//自定义的属性用getAttribute方法引用,并将数据打印出来 } } } </script>