Question

JS循环添加点击事件

求高手解答。
我需要做一个循环表格结构，大约是以下形式：
foreach ( $result as $row ) {
echo "<tr><td><input type='hidden' value='".$rou['id']."' /></td>";

echo "<td>无关紧要内容</td></tr>";

}
怎么给这个结构中的每一个TR循环添加点击事件，点击后将input-hidden中的值放入cookie？
谁来帮帮我，不胜感激

Answer 1

你最终的目的应该是想在input按钮上加入点击事件吧，点击后将input的值写入cookie吧，这样

的话，给tr加事件是没有意义的，下面的代码在不引用任何构架的前提下实现的，没有使用jquery

也没有使用ExtJS，相对比较麻烦些，希望你能看懂，如果用jquery的话，更简单了，这里就不写了

function writeCookie(name, value) {
	// 写入cookie的代码你自己去实现
}

var rows = new Array();	// 这个表格行的数组你自己组织吧，我这里只是定义一个简单的js数组，你可以从后台取这个值

// 先生成HTML代码，输出到网页上，这样才用JS绑定事件
var strHTML = '';
for(var i=0; i<rows.length; i++) {
	strHTML='<tr>' +
				'<td><input id='btn_" + i + "' type="hidden" value='" + rows[i].id + "' /></td>' +
				'<td>无关紧要的内容</td>' +
			'</tr>';
}
document.writeln(strHTML);

// 绑定事件
for (var i=0; i<rows.length; i++) {
	var btnName = 'btn_' + i;
	
	var e = document.getElementById(btnName);    // 循环取出每个按钮对象
	var value = e.value;				            // 取出按钮的值
	e.onclick = function() {
		writeCookie(btnName, value)		    // 以btnName作为键名，将按钮的值写入cookie
	}
}

追问

到底是不是我不懂了，type=‘hidden’不是隐藏的input吗？你让我给它本身加事件有什么意义？

追答

也对，可以给tr加事件，那就稍微改下，在生成HTML代码的时候稍微变化下

    strHTML+='<tr id='tr_" + i + "'>' +
                '<td><input id='btn_" + i + "' type="hidden" value='" + rows[i].id + "' /></td>' +
                '<td>无关紧要的内容</td>' +
            '</tr>';
    
// 绑定事件
for (var i=0; i<rows.length; i++) {
    var trName = 'tr_' + i;
    var btnName = 'btn_' + i;
    
    var tr = document.getElementById(trName);        // 循环取出每个tr对象
    var btn = document.getElementById(btnName);    // 取出按钮对象
    var value = btn.value;                        // 取出值
    tr.onclick = function() {
        writeCookie(trName, value)            // 以trName作为键名，将按钮的值写入cookie
    }
}

追问

最上面那几串是要做什么呀？

追答

哪几串？能否把问题说明白点？？？？
你真是惜字如金，多打几个字会死啊！！！

追问

就是最上面tr td 那几个，我主要写PHP，
所以你写的这个我有点理解不了

追答

说白了就是用字符串拼接方式，拼一个HTML代码，可能最终的代码是这样的

<tr id='tr_1'>
    <td><input id='btn_1' type='hidden' value='2014001' /></td>
</tr>
<tr id='tr_2'>
    <td><input id='btn_2' type='hidden' value='2014002' /></td>
</tr>

这个代码，应该能理解了吧

追问

Nice，这个样子的话，我可以直接用PHP输出出来。
我去试试去，谢谢啦。