JS填充数据、控制标签属性

---

前言

 鄙人是纯后端，被分配到了前端任务，所以学了一段时间的js，在我负责的模块中基本也就是获取数据-填充数据-属性控制，感觉挺常用的记录一下

一、获取/填充数据

1.自己写的标签或者组件dom里面标签有name或id的

$("input[ name='xxx' ]").val()
或
document.getElementById("xxx") .value

input是标签类型可以是textarea、div等对应上就行。xxx是标签name属性对应的名字。

2.引用组件而且dom里面没有id和name，如图，下拉组件的这种情况
可以用以下方式获取下拉框里的值

$(".sn-select-single span").text("")

3.同理填充数据也用这些方式填充

$("input[name = 'xxx']").val(填充的值)
或
document.getElementByid( "xxx") .value=填充的值

二、控制标签增删属性

运用场景：比如草稿箱点击进去是不可编辑的，点击修改按钮之后变为可编辑而且更改各种输入框按钮的颜色

增填：$("input[name = 'xxx']").attr("style","background-color:yellow;");

删除：$("input[name = 'xxx']").removeAttr("style");
或
$("#xxx").attr("disabled","disabled");//如果有id可以用这种方式

$("#xxx").removeAttr("style","background-color:yellow;");//如果只写一个值则把整个属性都删掉
或
var xxx=document.getElementById("xxx");
xxx.setAttribute("style", value: "background-color: rgb(248,248,248)");

xxx.removeAttribute("style");

三、修改标签属性值

//ByClassName可以修改所以class相同的标签属性
var xxx=document.getElementsByClassName("radio");
xxx.className="checkbox"
或
var xxx=document.getElementById("yyyy")
xxx.style.display="none"

四、获取取不固定大小的表格内容

以下表格理论上可以无限新增行，所以大小是不固定的

var list = [];
        var trList = document.getElementById("表格table的ID");
        var rows = trList.rows;//获取所有行
        if (rows.length > 1) {   //獲取行就算沒有數據，也會有一個<tr>標簽所以表格為空長度為1，这里不要加=号
            for (var i = 1; i < rows.length; i++) {
                var arr = {}
                var row = rows[i];//获取每一行

                //赋值
                var startDate = row.cells[1].getElementsByTagName("INPUT")[0].value;
                var endDate = row.cells[2].getElementsByTagName("INPUT")[0].value;
                var number = row.cells[3].getElementsByTagName("INPUT")[0].value;
                var remark = row.cells[4].getElementsByTagName("INPUT")[0].value;


                arr["type"] = "接續日期"
                arr["startDate"] = startDate;
                arr["endDate"] = endDate;
                arr["number"] = number;
                arr["remark"] = remark;

                list.push(arr)
            }
        }