克隆后如何清除输入,选择和文本区域字段

时间:2019-06-27 04:03:46

标签: javascript ajax clone

我正在创建用于公开项目的表格,我想要新的文本字段。当用户点击添加按钮

function fncAdd() { //ADD ROW AND CLONE
  var tb = document.getElementById('tbl');
  var tbody = document.createElement('tbody'); // fixed IE :>
  tb.insertBefore(tbody, null);
  var clone = document.getElementById('cln').cloneNode(true);
  tbody.insertBefore(clone, null);
}

function fncDelete() { //DELETE ROW
  var tb = document.getElementById('tbl');
  var del = tb.rows.length;
  if (del > 1) {
    tb.deleteRow(del - 1);
  }
}
<tr id="cln"> //CALL CLONE FUNCTION
  <div align="center">1</div>
  </td>
  <?php  //CONNECT DATABASE
         	include 'dbConfig.php';
         	$query = $db->query("SELECT * FROM accountcode ORDER BY acc_id ASC ");
         	$rowCount = $query->num_rows;
         	?>
  <td>
    <select id="accountcode"> //DROPDOWN 2ND BY AJAX
      <option value=""> - - Please select - - </option>
      <?php
          			if($rowCount > 0){
              			while($row=$query->fetch_assoc()){
                	echo '<option value="'.$row['acc_id'].'">'.$row['acc_name'].'</option>';
              			}
            		}else{
              			echo '<option value="">Accountcode not available</option>';
            		}
          			?>
    </select>
  </td>
  <td>
    <select id="item"> //DROPDOWN 2ND BY AJAX
      <option value=""> - - Select accountcode first - -</option>
    </select>
  </td>
  <td> //DETAIL BOX
    <textarea rows=4 cols=25 class="txtDETAIL" maxlength="100"> </textarea>
  </td>
  <td>
    <input type="text" class="txtAMOUNT" size="5"> //AMOUNT BOX
  </td>
  <td>
    <input type="text" class="txtUNIT" size="5"> //UNIT BOX
  </td>
  <td> //NOTE BOX
    <textarea rows=4 cols=15 class="note" maxlength="60">  </textarea>
  </td>
  <td> //UPLOADFILE FOR PICTURE OR STOCK
    <a href='upload.php?id={$row[' id="id" ']}'>CLICK</a>
  </td>
  </table>
  <p>
    <input type="button" value="ADD" onClick="fncAdd()"> //BUTTON ADD
    <input type="button" value="DELETE" onClick="fncDelete()"> //BUTTON DELETE
  </p>

当用户单击按钮时,我想创建文本字段值时遇到麻烦,我想克隆功能不从第一行复制旧值,列NO可以自动递增

我该怎么做

EXAMPLE

2 个答案:

答案 0 :(得分:1)

要清除可使用的表单数据,

document.getElementById("form1").reset();

您的表格应该看起来像

<form id="form1">
   <input .....
</form>

答案 1 :(得分:0)

要知道的一点是,克隆的元素是否具有唯一的ID(例如,将-1等附加到原始ID上)。

此外,我最近使用jQuery完成了此操作,但是,我使用了string.replace(regex,'');。而不是这种方法。

哦,是一个适合您情况的示例:

var element = document.getElementById('id-of-element').cloneNode(true);

element.childNodes[x].nextSibling.childNodes[y].value = '';

document.getElementById('target-element').insertBefore(element, null);

亲切的问候,