如何在此jQuery中添加HTML元素

How do I add HTML elements in this jQuery?

本文关键字:添加 HTML 元素 jQuery      更新时间:2023-09-26

我已经下载了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);
     });
  });

只需要在添加标签后在 jQuery 中添加这段代码。您可以通过以下代码的帮助使用表格而不是标签

newTextBoxDiv.after().html('<table> <tr> <td>Textbox '+ counter + ' : ' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" > <td></tr></table>'); 
如果你想动态

地添加表行,你可能希望使用 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'));