更改innerhtml輸入框的值

Question

我必須在html表格中添加新行，它將從第一行生成文本框作爲內部html，並顯示第一行的文本。

當您按下添加語言按鈕時，您看到的最後一行與第一行相同。但是我想要新行應該是空白的。

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 

          // limit the user from creating fields more than your limits 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[1].cells[i].innerHTML; 


     } 

我已經把$('.small').val('Some text');但文本，然後箱子不見了。

請注意頁面上有多個表格，我們使用相同的函數來生成行。

Answer 1

您需要清洗文本框，以讓他們空。你已經用jQuery的標籤標記了這個，所以這裏是我的解決方案給你的問題。

function addNewRow(ID) { 
 
    var table = $("#" + ID); 
 
    var cloneRow = $("tr:eq(1)", table).clone(); 
 

 
    //Clean out all textboxes 
 
    $("td input:text", cloneRow).removeAttr('value') 
 

 
    $("tbody", table).prepend(cloneRow) 
 
} 
 

 
$('button').click(function() { 
 
    addNewRow("test") 
 
})

table { 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
    border-collapse: collapse; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 1px solid #cdcdcd; 
 
} 
 

 
table th, 
 
table td { 
 
    padding: 10px; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="test"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>Value 1</th> 
 
     <th>Value 2</th> 
 
     <th>Value 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="record"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 1"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 2"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 3"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="record"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 1"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 2"> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="record" value="Value 3"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button type="button">Add row!</button>

Answer 2

您可以通過使用空第一行的輸入字段：

$("table tr:first input").val(""); 

這將：

$("table      //Select the table 
     tr:first   //Pick the first row in that table 
        input  //Take the input fields from that first row 
         ").val("");