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>