如何使用java脚本创建表单字段并更新表中的记录dynamicaly

示例：

我在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>

请参阅此代码。。

 <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 );
  }

点击下面的链接进行实时演示

示例：http://jsfiddle.net/7AeDQ/

相关内容

最新更新

热门标签：