如何在此jQuery中添加HTML元素?

时间:2014-11-18 09:52:04

标签: javascript jquery html

我已下载jQuery以添加&删除输入类型。

现在如何在此代码中插入新表?

这是我的代码:

$(document).ready(function(){

    var counter = 2;

    $("#ctl00_mainContentPlaceHolder_btnNewRow").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox '+ counter + ' : ' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" ></label>');               

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==2){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox " + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });

2 个答案:

答案 0 :(得分:4)

添加标签后,您只需在jQuery中添加此代码即可。 你可以在下面的代码

的帮助下使用表而不是标签
newTextBoxDiv.after().html('<table> <tr> <td>Textbox '+ counter + ' : ' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" > <td></tr></table>'); 

答案 1 :(得分:0)

如果要动态添加表行,可能需要使用dom操作而不是将html代码作为字符串

var table = $('<table/>');
//for
    var tr = $('<tr/>').attr('id', {row_id}).addClass('row_class');
    //for
        var td = $('<td/>').addClass('td_class').html('or .text()');
        tr.append(td);
    table.append(tr);
table.appendTo($('whereever'));