是否可以使用複選框或單選按鈕代替提交按鈕？

我有一個表格，允許我動態地添加額外的行到一個窗體使用JavaScript，但與添加新行相關聯的按鈕過於「龐大」，並且該腳本已經合併使用必須按順序檢查的複選框刪除任何與之相關的行，所以我想知道是否可以使用複選框添加和刪除行而不是按鈕？這裏是腳本http://jsfiddle.net/2gPfn/9/的的jsfiddle和代碼：是否可以使用複選框或單選按鈕代替提交按鈕？

function addRow(tableID) { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     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[0].cells[i].innerHTML; 
      newcell.children[0].name = newcell.children[0].name + rowCount; 
      console.log(newcell.children[0].name); 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
      } 
     } 
    } 

    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) { 
       if(rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


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

基本上就是我想要做的就是添加一個新行的用戶將檢查框和一個新的行會用新的複選框被添加。如果他們取消選中前一個複選框，則該行將被刪除。這可能嗎？

來源

2013-06-02 Jason

你試過''？ – acdcjunior

是的，這是可能的，但這是一個壞主意。複選框用於選擇，而不是操作。 –

@acdcjunior是的，我試過了，它沒有工作，這是我第一次嘗試。 – Jason

不知道我真的明白你爲什麼要這樣做。但是，如果我理解正確你：

http://jsfiddle.net/2gPfn/13/

<INPUT type="checkbox" name="chk" onclick="doIt(this, 'dataTable')">

function doIt(el, tableID) { 
    if (el.checked) { 
     addRow(tableID); 
    } else { 
     deleteRow(el); 
    } 
} 

function addRow(tableID) { 
    /* same as original */ 
} 

function deleteRow(el) { 
    var row = el.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
}

來源

2013-06-02 03:03:18

謝謝詹姆斯完美地工作，這是我個人使用的公司內部表格，只有我和我的員工纔會使用。基本上，它只是使表單不像在平板電腦或Toughbook上使用那樣笨重和容易。這不是爲了這個世界的使用，而是感謝你用它保持話題，你幫了我很多！ – Jason

詹姆斯這個工程很好，但有一個問題，如果你碰巧雙擊複選框，它會添加兩行，你不能刪除其中的一個。 – Jason

是否可以使用複選框或單選按鈕代替提交按鈕？

回答

相關問題