如何用文本框動態添加表格行？

我有一個表，其中每行包含4個單元格，每個單元格默認包含一個文本框。我只有一行和一個按鈕，允許我每次點擊時添加一行。如何用文本框動態添加表格行？

如何在Javascript中動態添加包含文本框的錶行？

我也想有自己的文本框的ID變化：

<input type="text" id="txtbox1" /> 
<input type="text" id="txtbox2" />

現在，我有一些代碼，增加細胞：

的JavaScript：

<script type="text/javascript"> 
    function insertRow(){ 
       var table=document.getElementById("tbSibling"); 
       var row=table.insertRow(2); 
       var cell1=row.insertCell(0); 
       var cell2=row.insertCell(1); 
       var cell3=row.insertCell(2); 
       var cell4=row.insertCell(3); 
    } 
</script>

的表：

<table id="myTable"> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Gender</th> 
     <th>Occupation and Employer</th> 
     <th>Add</th> 
     <tr> 
      <td><input type="text" id="txtName" /></td> 
      <td><input type="text" id="txtAge" /></td> 
      <td><input type="text" id="txtGender" /></td> 
      <td><input type="text" id="txtOccupation" /></td> 
      <td id="btnAdd" class="button-add" onclick="insertRow();">add</td> 
     </tr> 
</table>

來源

2013-07-17 QKWS

@fragile窗口編輯帖子時：請刪除與問題無關的問候/關閉。見[這篇文章]（// meta.stackoverflow.com/questions/260776/should-i-remove-fluff-when-editing-questions）。 – FrankerZ

感謝您指出，不確定是否刪除問題。我將在未來做到這一點。 – fragilewindows

通過使用純粹的javascript檢查這一點，這是你想要的。 JSFIDDLE

var index = 1; 
function insertRow(){ 
      var table=document.getElementById("myTable"); 
      var row=table.insertRow(table.rows.length); 
      var cell1=row.insertCell(0); 
      var t1=document.createElement("input"); 
       t1.id = "txtName"+index; 
       cell1.appendChild(t1); 
      var cell2=row.insertCell(1); 
      var t2=document.createElement("input"); 
       t2.id = "txtAge"+index; 
       cell2.appendChild(t2); 
      var cell3=row.insertCell(2); 
      var t3=document.createElement("input"); 
       t3.id = "txtGender"+index; 
       cell3.appendChild(t3); 
      var cell4=row.insertCell(3); 
      var t4=document.createElement("input"); 
       t4.id = "txtOccupation"+index; 
       cell4.appendChild(t4); 
     index++; 

}

來源

2013-07-17 02:39:16 Howard

沒有輸入ID。提問者需要所有動態生成的輸入的不同ID。 – Learner

剛剛創建的HTML代碼，上面有一個文本框代碼，然後將其追加的元素

$("#addRow").click(function(){ 
    $("#myTable").append("<tr><td>row</td><td><input type='text'></td></tr>"); 
});

你http://jsfiddle.net/WNDQJ/1/

來源

2013-07-17 02:18:39

我不是一個凝聚一切排長龍的粉絲，但是這對我正在嘗試做的事情確實很有效！ – WMios

工作代碼這裏的FIDDLE

var ctr = 1; 
$('#myTable').on('click', '.button-add', function() { 
    ctr++; 
    var txtName = "txtName" + ctr; 
    var txtAge = "txtAge" + ctr; 
    var txtGender = "txtGender" + ctr; 
    var txtOccupation = "txtOccupation" + ctr; 
    var newTr = '<tr><td><input type="text" id=' + txtName + ' /></td><td><input type="text" id=' + txtAge + ' /></td><td><input type="text" id=' + txtGender + ' /></td><td><input type="text" id=' + txtOccupation + ' /></td><td id="btnAdd" class="button-add">Add</td></tr>'; 
    $('#myTable').append(newTr); 
});

來源

2013-07-17 02:24:35

不同行中的所有文本框都有相同的ID @Vond – Learner

我在更新我的答案。我已經注意到了。抱歉。 –

以下是一個快速解決方案：

$('#btnAdd').click(function(e) { 
    $('#myTable tr:last').after(
     '<tr><td><input type="text" id="txtName' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtAge' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtGender' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtOccupation' + $("tr:last")[0].rowIndex + '" /></td></tr>' 
    ); 
});

樣品小提琴：http://jsfiddle.net/YqV8G/

另外，我建議你只有一個Add按鈕。除非需要，否則不需要複製添加按鈕。

來源

2013-07-17 02:30:45 Learner

<script language="javascript" type="text/javascript"> 
var i=1; 
function addRow() 
{ 
     var tbl = document.getElementById('table1'); 
     var lastRow = tbl.rows.length; 
     var iteration = lastRow - 1; 
     var row = tbl.insertRow(lastRow); 
     var firstCell = row.insertCell(0); 
     var el = document.createElement('input'); 

     el.type = 'text'; 
     el.name = 'name_' + i; 
     el.id = 'name_' + i; 
     el.size = 20; 
     el.maxlength = 20; 
     firstCell.appendChild(el); 

    // alert(i); 
     i++; 
     frm.h.value=i; 
    // alert(i); 
} 
</script> 

<!DOCTYPE html> 
<html> 
<body> 

<form action="addtablerow3.php" method="post" name="frm" id="frm"> 
<input type="button" value="Add New Item" onclick="addRow();" /> 
</form> 

<table id="table1" border="1" width="100%"> 
<tr> 
    <td width="10%" bgcolor="#336666">HI </td> 
    <td> this </td><td>is </td><td> 4</td> 
</tr> 
</table> 


</body> 
</html>

來源

2014-08-24 13:13:41

的JavaScript

$(".Add").click(function() { 
      $(".tbl").append(newRow); 
      ddlEditSelected = '0'; 
      numberOfRows++; 

     }); 




     var newRow = "<tr><td><select class='status1' id='ddlStatus' > <option value='0'>--Select--</option><option value='2'>Schedule Variance</option>" + 
          "<option value='3'>Effort Variance</option>" + 
          "<option value='4'>GOM Variance</option>" + 
          "<option value='5'>Defect Density per Person Day of Effort</option>" + 
          "<option value='6'>Resource Variance</option>" + 
           "<option value='7'>Process Quality</option>" + 
           "<option value='8'>Non Billable CRs</option>" + 


          "<td><input type='text' class='source1' id='txtSource' name='Source' maxlength='3' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)' ></td></td></tr>"; 
    });

HTML

<table width="100%" id="qualitygoal1" class="tbl"> 
      <tbody> 
       <tr> 
        <th align="center">Parameter</th> 
        <th align="center">WeightAge</th> 


       </tr> 

       @foreach (var data in Model) 
       { 

        <tr> 
         <td> 
          <span class="spanStatus" id="[email protected]" destinationid="@data.Parameter">@data.ParameterValue</span> 
          <select class="status" id="[email protected]"> 
           <option value="0">--Select--</option> 
           <option value="2">Schedule Variance</option> 
           <option value="3">Effort Variance</option> 
           <option value="4">GOM Variance</option> 
           <option value="5">Defect Density per Person Day of Effort</option> 
           <option value="6">Resource Variance</option> 
           <option value="7">Process Quality</option> 
           <option value="8">Non Billable CRs</option> 

          </select> 
         </td> 
         <td> 
          <span class="spanSource" id="[email protected]">@data.Weightages</span> 
          <input class="Source" id="txtSource[email protected]" type="text" value="@data.Weightages" maxlength="3" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" /> 
         </td> 



        </tr> 

       } 
      </tbody> 
     </table>

來源

2014-12-10 06:04:21 mohankittu

**add button** 



<div align="right"> 
     <input type="button" value="Add Phase" class="Add" /> 

     <input type="button" value="Save" class="saved" /> 
     <input type="button" value="Close" class="cancel" /> 



    </div>

來源

2014-12-10 06:22:24 mohankittu

如何用文本框動態添加表格行？

回答

相關問題