Ajax: 如何获取具有动态生成的 ID 的元素的值
Ajax: how to get values of elements with dynamicaly generatd IDs
我有一大块 HTML 使用 PHP 生成的代码。
HTML 看起来像这样:
<input type="text" id="10"><button onclick="process()">send</button>
<input type="text" id="11"><button onclick="process()">send</button> <!-- and so on until id=N -->
PHP 代码如下:
<?php while ($row = $result->fetch_assoc()) { ?>
<input type="text" id="<?=$row['id']?>">
<button onclick="process()">send</button>
<br>
<?php } ?>
假设如果用户单击 SEND 按钮,input 标签的值将传递给 过程() 函数。
这就是我卡住的地方:我不知道我应该在 process()[ 中的 getElementById 中指定哪个确切的输入 ID =30=] 功能 - 因为我不知道按下了哪个按钮。
如有任何帮助,将不胜感激。
虽然这不是首选方式,但如果您想坚持使用内联事件处理程序,您可以这样做:
function process(elem){
alert(elem.previousSibling.value);
}
<input type="text" id="10"><button onclick="process(this)">send</button>
<input type="text" id="11"><button onclick="process(this)">send</button>
注意这个
Gecko-based browsers insert text nodes into a document to represent
whitespace in the source markup. Therefore a node obtained, for
example, using Node.firstChild or Node.previousSibling may refer to a
whitespace text node rather than the actual element the author
intended to get.
与之前的答案一样,理想情况下您应该避免内联绑定事件。但是如果你必须做的解决方案是两个,默认情况下,如果事件对象没有被任何人覆盖,则将其传递给事件处理程序方法。
这样的方法将为您提供有关事件目标元素的足够信息。 (行为可能因浏览器而异,因此可能需要对其进行彻底测试。)
function EventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
现在您可以通过 target.id 调用获取 ID,或者您基本上可以获得任何属性值。
我有一大块 HTML 使用 PHP 生成的代码。
HTML 看起来像这样:
<input type="text" id="10"><button onclick="process()">send</button>
<input type="text" id="11"><button onclick="process()">send</button> <!-- and so on until id=N -->
PHP 代码如下:
<?php while ($row = $result->fetch_assoc()) { ?>
<input type="text" id="<?=$row['id']?>">
<button onclick="process()">send</button>
<br>
<?php } ?>
假设如果用户单击 SEND 按钮,input 标签的值将传递给 过程() 函数。
这就是我卡住的地方:我不知道我应该在 process()[ 中的 getElementById 中指定哪个确切的输入 ID =30=] 功能 - 因为我不知道按下了哪个按钮。
如有任何帮助,将不胜感激。
虽然这不是首选方式,但如果您想坚持使用内联事件处理程序,您可以这样做:
function process(elem){
alert(elem.previousSibling.value);
}
<input type="text" id="10"><button onclick="process(this)">send</button>
<input type="text" id="11"><button onclick="process(this)">send</button>
注意这个
Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a whitespace text node rather than the actual element the author intended to get.
与之前的答案一样,理想情况下您应该避免内联绑定事件。但是如果你必须做的解决方案是两个,默认情况下,如果事件对象没有被任何人覆盖,则将其传递给事件处理程序方法。
这样的方法将为您提供有关事件目标元素的足够信息。 (行为可能因浏览器而异,因此可能需要对其进行彻底测试。)
function EventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
现在您可以通过 target.id 调用获取 ID,或者您基本上可以获得任何属性值。