Question

我有一个行点击事件。最近不得不为每一行添加一个复选框。如何在行点击事件中识别单击的单元格？

或者在单击复选框时阻止行单击。

尝试：在行点击事件中未定义this.parentNode.cellIndex。

function pop(row){
alert(row.cells[1].innerText);
}

<table style="width:100%">
  <tr>
    <th>Select</th>
    <th>Site</th> 
  </tr>
  <tr onclick="pop(this);">
    <td><input type="checkbox" id="123456" /></td>
    <td>Lonodn</td> 
  </tr>
</table>

Answer 1

你想要这样的东西吗？您只需检查事件源元素的type属性并验证是否允许，您可以使用e.stopPropagation();return;停止事件。

＆＃13;

function pop(e, row) {
console.log(e.srcElement.type);
  if(e.srcElement.type === 'checkbox'){
    e.stopPropagation();
    return;
  }else{
    console.log(row);
    alert(row.cells[1].innerText);
  }
}

＆＃13;

<table style="width:100%">
  <tr>
    <th>Select</th>
    <th>Site</th>
  </tr>
  <tr onclick="pop(event, this);">
    <td><input type="checkbox" id="123456" /></td>
    <td>Lonodn</td>
  </tr>
</table>

＆＃13;

Answer 2

您应该将事件详细信息传递给您的函数并检查target属性：

function pop(e){
    // If the target is not a checkbox...
    if(!e.target.matches("input[type='checkbox']")) {
        alert(e.target.cellIndex);
    }
}

<table style="width:100%">
  <tr>
    <th>Select</th>
    <th>Site</th> 
  </tr>
  <tr onclick="pop(event)">
    <td><input type="checkbox" id="123456" /></td>
    <td>Lonodn</td> 
  </tr>
</table>

注意：如果您在<td>中嵌套了元素，则可能需要检查e.target.closest("td")。

注2：根据您支持的浏览器，您可能需要matches方法的填充。

Answer 3

如果你不想在每一行上附加一个监听器，这是一个例子：

＆＃13;

document.getElementById("majorCities").addEventListener("click", function(e){
  if(e.target.type === 'checkbox'){
  var checked = e.target.checked;
	var tr = e.target.parentElement.parentElement;
	var city = tr.cells[1].innerHTML;
	console.log(city+":checked="+checked);
  }

});

＆＃13;

<table id="majorCities" style="width:100%">
  <tr>
    <th>Select</th>
    <th>Site</th> 
  </tr>
  <tr>
    <td><input type="checkbox"/></td>
    <td>London</td> 
  </tr>
  <tr>
    <td><input type="checkbox"/></td>
    <td>Paris</td> 
  </tr>
  <tr>
    <td><input type="checkbox"/></td>
    <td>New-York</td> 
  </tr>
</table>

＆＃13;

Answer 4

window.pop = function(row){
    console.log('here');
    var parent = row.parentNode;
  Array.from(row.parentNode.querySelectorAll('tr')).forEach(function(tr, index){
    if (tr === row) {
        alert(index)
    }
  })
}

https://jsfiddle.net/sz42oyvm/

Answer 5

这是一种乐趣，另一个例子是一个包含城市的对象。使用与所点击的城市名称相对应的ID绘制表格的名称和方法，因此获取点击的名称更容易。

＆＃13;

bundle exec

＆＃13;

(function () {
var mySpace = window || {};
mySpace.cities = {};
mySpace.cities.pointer = document.getElementById("majorCities");
mySpace.cities.names = ["Select","City"];
mySpace.cities.data = [{"name":"Paris"},{"name":"New Delhi"},{"name":"Washington"},{"name":"Bangkok"},{"name":"Sydney"}];

mySpace.cities.draw = function(){
this.pointer.innerHTML="";
var html = "";
html+="<tr>"
	for(var i=0;i < this.names.length;i++){
		html+="<th>"+this.names[i];
		html+="</th>"
	}
html+="</tr>"
	for(var i=0;i < this.data.length;i++){
		html+="<tr>"
		html+="<td><input id='"+this.data[i].name+"' type='checkbox'/></td>"
		html+="<td>"+this.data[i].name+"</td>"	
		html+="</tr>"
	}
this.pointer.innerHTML=html;
}
mySpace.cities.draw();
mySpace.cities.pointer.addEventListener("click", function(e){
  if(e.target.type === 'checkbox'){
	var checked = e.target.checked;
	var city = e.target.id;
	console.log(city+":checked="+checked);
  }

});

})();

＆＃13;

	table {width:25%;background:#ccc;border:1px solid black;text-align:left;}
	td,tr {background:white;}
	th:first-of-type{width:20%;}

＆＃13;

从行单击获取单击的列索引

5 个答案: