1

テーブルに行を追加しています。行のセルの1つに、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 呼び出しに直行するので、検索を行うためにオブジェクトまたは値のいずれかにアクセスできる必要があります。どんな助けでも大歓迎です。

4

2 に答える 2

0

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.

もう 1 つの問題は、インライン イベント ハンドラー ( onkeyupHTML の など) の場合、関数でラップする必要がないことです。次のように動作します。

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

私はテストしていませんが、別の関数でラップすることで、thisが異なると思われます。したがって、なぜそれが機能しないのですか。

あいまいさを避けるために、HTML イベント ハンドラーは使用しないでください。

于 2012-04-10T08:37:42.727 に答える
0

次のような値を渡すことができます:-

  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();
        }
    });
于 2012-04-10T07:14:18.413 に答える