如何创建表单字段，并使用Java脚本

我html创建了一个字段名。我想更新表格中的该字段，并且想要随时删除记录。

下面是创建和删除行的示例，但我不知道如何获取值，无论何时单击提交并使用`javascript'将其添加到表中。

<HTML> 
    <HEAD> 
     enter code here 
    <TITLE> create/delete rows </TITLE> 
    <SCRIPT language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 
     var name=document.getElementById("mtext"); 
     document.getElementById("mtext").value = name; 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      element1.name="chkbox[]"; 
      cell1.appendChild(element1); 

      var cell2 = row.insertCell(1); 
      cell2.innerHTML = rowCount + 1; 

      var cell3 = row.insertCell(2); 
      var element2 = document.createElement("input"); 
      element2.type = "text"; 
      element2.name = "txtbox[]"; 
      cell3.appendChild(element2); 


     } 

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

      for(var i=0; i<rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       if(null != chkbox && true == chkbox.checked) { 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 


      } 
      }catch(e) { 
       alert(e); 
      } 
     } 

    </SCRIPT> 
</HEAD> 
<BODY> 
    <label>Name:</label><INPUT type="mtext"> 
    <INPUT type="button"value="submit" onclick="addRow('dataTable')" /> 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
    <TABLE id="dataTable" width="350px" border="1"> 
     <TR> 
      <TD><INPUT type="checkbox" name="chk"/></TD> 
      <TD> 1 </TD> 
      <TD> <INPUT type="text" /> </TD> 
     </TR> 
    </TABLE> 
</BODY>

来源

2015-07-11 siva kumar

请参阅该代码..

<div id="POItablediv"> 
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/> 
<table id="POITable" border="1"> 
    <tr> 
     <td>POI</td> 
     <td>Latitude</td> 
     <td>Longitude</td> 
     <td>Delete?</td> 
     <td>Add Rows?</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td><input size=25 type="text" id="latbox"/></td> 
     <td><input size=25 type="text" id="lngbox" readonly=true/></td> 
     <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td> 
     <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td> 
    </tr> 
</table>

js代码是在这里..

function deleteRow(row) 
    { 
    var i=row.parentNode.parentNode.rowIndex; 
    document.getElementById('POITable').deleteRow(i); 
} 


    function insRow() 
{ 
    console.log('hi'); 
    var x=document.getElementById('POITable'); 
    var new_row = x.rows[1].cloneNode(true); 
    var len = x.rows.length; 
    new_row.cells[0].innerHTML = len; 

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
    inp2.id += len; 
    inp2.value = ''; 
    x.appendChild(new_row); 
    }

点击下面链接，现场演示

考试PLE：http://jsfiddle.net/7AeDQ/

来源

2015-07-11 08:00:15 Maheshvirus

如何创建表单字段，并使用Java脚本

回答

相关问题