在每个表条目上运行函数

时间:2013-09-15 20:54:32

标签: javascript

我有一个表格,其条目如下:

<tr>
<td><input type="checkbox" name="ids[]"/><a style="cursor: pointer;" onclick="addtopath('parameter1', 'parameter2')" class="btn_addpath"> Add</a></td>
</tr>

正如您所看到的,每个表条目都包含函数“addtopath('parameter1', 'paramter2');

参数通过php生成;所以每个项目都不同。此外,每个条目都有一个复选框。这就是麻烦发生的地方。

我想创建一个为每个表项运行“addtopath”函数的函数,该函数被选中,就好像用户点击了“添加”按钮一样。

希望它有意义。

4 个答案:

答案 0 :(得分:2)

现代浏览器......

function runChecked() {
    var links = mytable.querySelectorAll("input[name='ids[]']:checked + a.btn_addpath");
    [].forEach.call(links, function(link) {
        link.onclick();
    });
}

IE8 + ...

function runChecked() {
    var inputs = mytable.querySelectorAll("input[name='ids[]']");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked)
            inputs[i].nextSibling.onclick();
    }
}

IE6 + ...

function runChecked() {
    var inputs = mytable.getElementsByTagName("input");
    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].name === "ids[]" && inputs[i].checked)
            inputs[i].nextSibling.onclick();
    }
}

答案 1 :(得分:1)

如果你想在某个时候转移到jQuery,我会将参数添加到数据属性。这也是很好的做法。

<td><input type="checkbox" data-one="one" data-two="two" class="btn_addpath"/>Add</td>
<td><input type="checkbox" data-one="three" data-two="four" class="btn_addpath"/>Add</td>
<td><input type="checkbox" data-one="five" data-two="six" class="btn_addpath"/>Add</td>
<td><input type="checkbox" data-one="seven" data-two="eight" class="btn_addpath"/>Add</td>

function addToPath(p1, p2) {
  console.log(p1, p2);
}

var checkboxes = document.getElementsByClassName('btn_addpath');
var checkboxArr = [].slice.call(checkboxes);
checkboxArr.forEach(function (el) {
  var p1 = el.getAttribute('data-one');
  var p2 = el.getAttribute('data-two');
  el.onchange = function () {
    if (this.checked) { addToPath(p1, p2); }
  };
});

答案 2 :(得分:0)

如果使用jQuery,可以使用以下代码:

    $("input[type=checkbox]:checked").siblings('a').click();

http://jsfiddle.net/tMe46/

进行测试

答案 3 :(得分:-1)

这应该在复选框中的所有链接上模拟onClick事件

$("input[type=checkbox]:checked + a").click();