Question

我正在向表中添加一行。在行中的一个单元格中是一个输入，我想进行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调用，所以我需要能够访问对象或值，以便我进行搜索。任何帮助表示赞赏。

Answer 1

您可以传递这样的值： -

  urlData = "" ;
    postData = "vendorType=" + jQuery('#EnrollmentRoleId').val() + "&time=" + new Date().getTime();

    jQuery.ajax({
        url: urlData,
        data: postData,
        success: function(data) {
            //alert(data);
            jQuery('#EnrollmentVendorId').html(data);
            jQuery('#user_id_div').show();
            jQuery('#loading_image').hide();
        }
    });

Answer 2

感谢您让我发现insertRow，rowIndex和insertCell！

不过，你的生活一无所获。

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

这是正确的方法（DOM兼容，没有innerHTML evil，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事件处理程序。

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

2 个答案: