js判断对象是否有该属性；js从数组中的对象取出特定字段并生成新的数组；js获取table表格中的数据,js让table中的单元格变色,阻止JS事件穿透

hasOwnProperty判断对象是否有该属性

类似java中List.contain(‘xxx’)

var obj = {
	xxx: xxx
}

if(obj.hasOwnProperty('xxx')){	//返回true/false
	console.log('有这个属性')
}

js从数组中的对象取出特定字段并生成新的数组

var arr = [
  {
    'id': '1',
    'name': 'img1',
    'imgUrl': './img1.jpg',
  },
  {
    'id': '2',
    'name: 'img2',
    'imgUrl': './img2.jpg',
  },
  {
    'id': '3',
    'name': 'img3',
    'imgUrl': './img3.jpg',
  }
];
arr.map(x => {return x.imgUrl}) // 生成数组
//arr.map(function(item, index) {
//    return item.field;
//});

js获取table表格中的数据

id	name
1	fdipzone
2	wing

<table>
 <tr>
   <td>id</td>
   <td>name</td>
 </tr>
 <tr>
   <td>1</td>
   <td>fdipzone</td>
 </tr>
 <tr>
   <td>2</td>
   <td>wing</td>
 </tr>
</table>  

获取表格数据主要方法就是rows[i].cells[j]
rows代表tr
cells代表td

/** 
 * 遍历表格内容返回数组
 * @param  Int   id 表格id
 * @return Array
 */
function getTableContent(id){
    var mytable = document.getElementById(id);
    var data = [];
    for(var i=0,rows=mytable.rows.length; i<rows; i++){
        for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
            if(!data[i]){
                data[i] = new Array();
            }
            data[i][j] = mytable.rows[i].cells[j].innerHTML;
        }
    }
    return data;
}





/** 
 * 显示表格内容
 * @param  Int   id 表格id
 */
function showTableContent(id){
    var data = getTableContent(id);
    var tmp = '';
    for(i=0,rows=data.length; i<rows; i++){
        for(j=0,cells=data[i].length; j<cells; j++){
            tmp += data[i][j] + ',';
        }
        tmp += '<br>';
    }
    document.getElementById('result').innerHTML = tmp;
}

js让table中的单元格变色

主要思路是先获取到单元格td的dom节点对象,然后添加onclick方法,改变所在的单元格的背景颜色

这里上一份coffee的demo,原理都是一样的

setTimeout(() ->
	for tdDom in it.choiceDockBottomGrid.domNode.getElementsByClassName('gridxMain')[0].getElementsByTagName('td')
		onn tdDom, 'click' , (event) ->
			if this.cellIndex > 6 && this.innerText == '0'
				if 'blue' == this.style.background
					this.style.background = this.parentElement.firstElementChild.style.background
				else
					this.style.background  = 'blue'

			event.stopPropagation()
,1000)

同时在这一块还注意到一个问题就是阻止JS事件穿透
来一个demo简要说明一下