gpt4 book ai didi

javascript - 动态创建一个元素并尝试将其值作为函数 onkeyup 中的参数传递

转载 作者:行者123 更新时间:2023-11-28 09:55:36 25 4
gpt4 key购买 nike

我正在向表中添加一行。该行的一个单元格中有一个输入,我想进行 ajax 调用。但是,我在传递输入值时遇到问题。

我在这里说明了这个问题:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function addElement(){
var id = 0;
var tbl = document.getElementById('myTable');
var rowInd = document.getElementById('row1').rowIndex;
rowInd++;
var row0 = tbl.insertRow( rowInd );
var cell = row0.insertCell(0);
// cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="alert( '+this.value+' );" />';
// acts as expected: hello world
// cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( \'value='+this.value+'\' )" />';
// Outputs: value=undefined
var theId = "myInput"+id;
// cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( \'value='+document.getElementById( theId ).value+'\' )" />';
// Output: Object required
cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest( \'value='+this.value+'\' ) }" />';
// Nothing happens
}

function makeAjaxRequest( val ){
alert( val );
}
</script>
</head>

<body>
<span onclick="addElement()">
Click me
</span>
<br /><br />
<table id="myTable">
<tr id="row1"><td>hello</td></tr>
</table>
</body>
</html>

它会直接进行 ajax 调用,因此我需要能够访问对象或值,以便进行搜索。如有任何帮助,我们将不胜感激。

最佳答案

感谢您让我发现了 insertRow、rowIndex 和 insertCell!

顺便说一句,你让你的生活变得毫无意义。

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup=" function(){ makeAjaxRequest( \'value='+this.value+'\' ) }" />';

这是正确的方法(DOM兼容,没有innerHTML邪恶,blablabla):

var input = document.createElement('input')
input.type = 'text'
input.id = 'myInput' + id
input.value = 'hello world'
input.onkeyup = function() {
makeAjaxRequest(this.value) // this is how to make it work
}
cell.appendChild(input) // or use replaceChild depending on your needs

传递 'value=' + this.value 时的问题是传递以下值:value=hello world

另一个问题是,对于内联事件处理程序(如 HTML 中的 onkeyup),您不需要包装在函数中。以下内容可行:

cell.innerHTML = '<input type="text" id="myInput'+id+'" value="hello world" onkeyup="makeAjaxRequest( this.value );" />';

我还没有测试过,但我怀疑通过包装另一个函数,this 是不同的。这就是为什么它不能工作。

为避免任何歧义,请勿使用 HTML 事件处理程序。

关于javascript - 动态创建一个元素并尝试将其值作为函数 onkeyup 中的参数传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10084461/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com