Question

我有以下Javascript，只需在id =“freq-table”的表格单元格中单击鼠标，就可以使用单元格的值填充id =“searchTerm（x）”的连续<input>表单字段。它在<body>标记中引用为：

<body onload="populateFields()>

和<table>标记为：

<table onclick="populateFields()> 

var index=0;
function populateFields(){
    var ft_id = document.getElementById("freq-table");    
    var alltds = ft_id.getElementsByTagName("td");
    for (var i in alltds) {
        alltds[i].onclick = function () {
            if(index==0) {
                searchTerm1.value = this.innerHTML;
            } else {
                setThis(this.innerHTML);
            }
        }
    }
    if (index<2) {
        index++;
    } else {
        index = 1;
    }
}

function setThis(value) {
    document.getElementById("searchTerm"+index).value = value;
}

当尝试通过传递元素id（如下所示）使函数更通用时，现在需要点击第二次鼠标来开始填充字段。

<table onclick="populateFields(this)" id="freq-table">

function populateFields(element){
   var alltds = element.getElementsByTagName("td");

改变行为的修订是什么？我只是错误地传递了身份证？或者是修改后的函数，现在期望在<body>标记中传递一个变量？令人困惑的是：如果我错误地传递了id，为什么在第一次鼠标点击后该功能会连续工作？对此有什么解决方法？

Answer 1

这里有一些繁重的代码，第一个表单击（或body onload）设置了额外的单击事件处理程序。

您应该做的是使用event delegation。使用事件委派，click事件处理程序附加到表，但知道单击了哪个单元格（目标）。

[更新]基于以上文章的代码示例：

var index=0;
var tableIds=["freq-table1","freq-table2","freq-table3"];
for (var i=0;i<tableIds.length;i++) {
var currentId=tableIds[i];
var table=document.getElementById(currentId);
table.onclick = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  while(target != this) {
    if (target.nodeName == 'TD') {
        // target is our cell
        setThis(target.innerHTML);
    }
    target = target.parentNode;
  }
  // increment index modulo 3
  index=(index+1)%3;
}; // end of onclick function
}  // end of for loop

现场演示：http://jsfiddle.net/srVmF/2/

Answer 2

我认为呼叫可以来自TD或TR元素。所以，第一次id将是'undefined'。

为什么不用事件调用函数并验证标记名称：

<table onclick="populateFields(event)" id="freq-table">

的Javascript

function populateFields(e) { 

 var source = e.target || e.srcElement;
 if (e.tagName == 'table') {
 var ft_id = document.getElementById(source.id);

Answer 3

现在，您必须在填充字段之前单击表格，而不是在页面加载时填充。

您可以离开页面加载处理程序：

<body onload="populateAllFields()">

对于每个表，您都要添加一个类：

<table class="mytable">

然后，代码：

function populateAllFields()
{
    [].forEach.call(document.getElementsByClassName('mytable'), populateFields);
}

Answer 4

您的<body onload="populateFields()>未传递您想要的元素，因此不再发生在页面加载时将要执行的初始设置。

您可以通过传递ID来修复它，并为onload处理程序提供ID。

function populateFields(id){
    var ft_id = document.getElementById(id);    
    var alltds = ft_id.getElementsByTagName("td");
    // and so on...
}

<body onload="populateFields('freq-table')">


<table onclick="populateFields(this.id)">

Javascript函数在传递元素ID与硬编码时改变行为

4 个答案: