DOM练习

1.表格动态添加删除

<button>添加表格</button>
<script>
//表格的动态添加，删除
//创建元素节点，标签为table
var tab = document.createElement('table')
//添加属性 属性名border 值1
tab.border = 1
//将table添加到父节点body下
document.body.appendChild(tab)
var id =1
//获取按钮，判定事件
document.querySelector('button').onclick = function(){
	//创建元素节点，tr
	var tr = document.createElemnt('tr')
	tab.appendChild(tr)
	 //创建第一个td节点 标签为td
            var td1 = document.createElement('td');
            //用innerHTML属性把id放到td1标签的内容
            td1.innerHTML = id  
            //创建第二个td节点，标签为td
            var td2 = document.createElement('td')
            //分别将td1、td2追加到父节点tr的后面
            tr.appendChild(td1)
            tr.appendChild(td2)
            //创建节点 标签为 button
            var btn = document.createElement('button');
            //button标签里的内容为 删除
            btn.innerHTML = '删除'
            //把button追加到父节点td2的最后
            td2.appendChild(btn)
            //点击事件
            btn.onclick = function () {
                //在点击删除按钮的时候，将按钮所在位置的tr删除
                tab.removeChild(this.parentNode.parentNode);
                //this.parentNode 找到的是td2 找的是父节点
                //this.parentNode.parentNode 找到的是tr
            }
            id++;
}
</script>

2.创建3行4列表格

<button>创建表格</button>
<script>
document.querySelector('button').onclick = function(){
	//创建table
	var tab = document.createElement('table')
	tab.border = 1
	tab.style.width = '500px'
	tab.style.height = '500px'
	document.body.appendChild(tab)
	for(var var i=0;i<3;i++){
		var tr = document.createElement('tr')
		tab.appendChild(tr)
		for(var j=0;j<4;j++){
			var td = document.createElemnt('td')
			td.innerHTML = '1'
			td.style.textAlign = 'center'
			tr.appendChild(td)
		}
	}
}
</script>

3.点击按钮动态添加创建列表

var btn = document.createElement('button')
var body = document.body
btn.innerText = '按钮'
body.appendChild(bnt)
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"]
//循环创建li，用数组存储
var lis = []
btn.onclick = function(){
	if(btn.innerText === '按钮'){
		btn.innerText === '禁止'
		for(var i=0;i<names.length;i++){
			lis[i] = document.createElement('li')
			lis[i].innerText = names[i]
			body.appendChild(lis[i])
		}
	}else{
		//按钮禁止点击 - 两者缺一不可
		btn.style.cursor = 'not-allowed'
		btn.style.pointerEvents = 'none'
	}
	var sli = document.querySelectorAll('li')
	for(var i=0;i<sli.length;i++){
		(function(i){
			sli[i].onmousemove = function(){
				if(i%2===0){
					this.style.backgroundColor = 'red'
				}else{
					this.style.backgroundColor = 'yellowgreen'
				}
			}
			sli[i].onmouseout = function(){
				this.style.backgroundColor = ''
			}
		})(i)
	}
}

4.动态添加数据 - 创建表格

var arr = [
		{name:"百度",href:"http://www.baidu.com"},
        {name:"谷歌",href:"http://www.google.com"},
        {name:"优酷",href:"http://www.youku.com"},
        {name:"土豆",href:"http://www.tudou.com"},
        {name:"快播",href:"http://www.kuaibo.com"},
        {name:"爱奇艺",href:"http://www.aiqiyi.com"}
]
var body = document.body
var btn = document.createElemnt('button')
btn.innerText = '按钮'
body.appendChild(btn)
btn.onclick = function(){
	var table = document.createElement('table')
	table.border = '1'
	body.appendChild('table')
	for(var i=0;i<arr.length;i++){
            var tr = document.createElement('tr')
            table.appendChild(tr)
            
            var td1 = document.createElement('td')
            td1.innerText = arr[i].name
            var td2 = document.createElement('td')
            td2.innerHTML = '地址：<a href="'+arr[i].href+'">'+arr[i].name+'</a>'
            tr.appendChild(td1)
            tr.appendChild(td2)
        }
}

3.动态创建表格实现删除

ID：<input type='text' id='user_id'>
姓名：<input type='text' id='user_name'>
电话：<input type='text' id='user_phone'>
<button>保存</button>
<table border='1'>
	<tr>
		<td>ID</td>
		<td>Name</td>
		<td>Tel</td>
		<td>操作</td>
	</tr>
</table>

document.querySelector('button').onclick = function(){
var ids= document.getElementById('user_id').value
var names= document.getElementById('user_name').value
var phones= document.getElementById('user_phone').value
var trs = document.createElement('tr')
var tds = []
for(var i=0;i<4;i++){
tds[i] = document.createElement('td')
trs.appendChild(tds[i])
if(i===0){
                tds[i].innerText = si
            }else if(i===1){
                tds[i].innerText = n
            }else if(i===2){
                tds[i].innerText = p
            }else if(i===3){
                tds[i].innerText = '删除'
                tds[i].style.color = 'red'
                tds[i].onclick = function(){
                    this.parentNode.remove()
                }
            }
}
var tbody = document.querySelector('tbody')
        tbody.appendChild(trs)
}