使用Javascript中的按鈕進行函數調用

我的一個按鈕意味着爲一段代碼添加功能時出現問題。它似乎工作，但爲什麼和複選框元件不像第一行中的行爲？使用Javascript中的按鈕進行函數調用

它應該計算日期的差異，並與其他<td>交叉。我需要用我的添加按鈕調用Date和Checkbox屬性。

我的代碼如下。我該如何解決它？感謝您的時間。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<style> 
    table { 
     border-collapse: collapse; 
     margin: 100px; 
    } 

    table, 
    td, 
    th { 
     border: 1px solid black; 
     padding: 10px; 
    } 

     table td.crossed { 
      background-image: -webkit-linear-gradient(top left, transparent, red, transparent); 
      background-image: -moz-linear-gradient(top left, transparent, red, transparent); 
      background-image: -o-linear-gradient(top left, transparent, red, transparent); 
      background-image: linear-gradient(to bottom right, transparent, red, transparent); 
     } 
</style> 
</head> 
<body> 
<table id="t1"> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th> 
      <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" /> 
     </th> 
    </tr> 

    <tr> 
     <td>1.</td> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td> 
      <input type="date" id="mydate"> 
     </td> 
     <td contenteditable='true'></td> 
     <td> 
      <input type="button" value="Delete Row" onclick="deleteRow(this)" /> 
     </td> 
    </tr> 
</table> 
<script> 
    function createRowColumn(row) { 
     var column = document.createElement("td"); 
     row.appendChild(column); 
     return column; 
    } 


    function addRow() { 
     var newrow = document.createElement("tr"); 
     var numericColumn = createRowColumn(newrow); 
     var checkColumn = createRowColumn(newrow); 
     var dateColumn = createRowColumn(newrow); 
     var emptyColumn = createRowColumn(newrow); 
     var removeColumn = createRowColumn(newrow); 

     var checkbox = document.createElement("input"); 
     checkbox.setAttribute("type", "checkbox"); 
     checkColumn.appendChild(checkbox); 

     var datebox = document.createElement("input"); 
     datebox.setAttribute("type", "date"); 

     dateColumn.appendChild(datebox); 

     emptyColumn.setAttribute("contenteditable", "true"); 

     var remove = document.createElement("input"); 
     remove.setAttribute("type", "button"); 
     remove.setAttribute("value", "Delete Row"); 
     remove.setAttribute("onClick", "deleteRow(this)"); 
     removeColumn.appendChild(remove); 

     var table = document.getElementById('t1'); 
     var tbody = table.querySelector('tbody') || table; 
     var count = tbody.getElementsByTagName('tr').length; 
     numericColumn.innerText = count.toLocaleString() + '.'; 

     tbody.appendChild(newrow); 
    } 

    function deleteRow(button) { 
     var row = button.parentNode.parentNode; 
     var tbody = row.parentNode; 
     tbody.removeChild(row); 


     var rows = tbody.getElementsByTagName("tr"); 
     for (var i = 1; i < rows.length; i++) { 
      var currentRow = rows[i]; 
      currentRow.childNodes[0].innerText = i.toLocaleString() + '.'; 
     } 

    } 
    var cb = document.querySelectorAll('input[type="checkbox"]')[0]; 
    var td = document.querySelectorAll("td[contenteditable]")[0]; 

    cb.addEventListener("click", function() { 
     if (cb.checked) td.classList.add("crossed"); 
     else td.classList.remove("crossed"); 
    }); 

    window.onload = function() { 
     document.getElementById('mydate').onchange = function() { 
      var selectedDateFromCalendar = new Date(this.value); 

      var currentdate = new Date(); 

      var Diff = new Date(selectedDateFromCalendar) - currentdate; 

      var diffDays = Math.ceil(Diff/(1000 * 3600 * 24)); 

      if ((selectedDateFromCalendar) - currentdate < 0) { 
       alert("out of date"); 
      } 
      else if ((selectedDateFromCalendar) - currentdate >= 1) { 
       alert("last " + diffDays + " day"); 
      } 
     } 
    } 
</script> 
</body> 
</html>

來源

2015-12-22 user5695111

因爲你採用ID的元素！ getElementById和ID是唯一的！你的jQuery被卡在第一個ID ..它無法識別其他。嘗試使用多個ID或類！

大編輯在這裏：

好了，遺憾的時間，但我有一些工作，沒有時間堆棧。如果你不想「循環和混淆多個類」，你的問題有點棘手，你可以得到一些關於這個問題的參考here

因此，使用上面的QA，下面是關於棘手解決方案的片段，其中我們必須在每個新動態創建的元素中「添加和觸發」事件。

檢查我不僅在第一行添加'myclass'，而且在下面的動態創建的'myclass'！

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script type="text/javascript" src='jquery-2.1.1.min.js'></script> 
 

 
    <style> 
 
     table { 
 
      border-collapse: collapse; 
 
      margin: 100px; 
 
     } 
 

 
     table, 
 
     td, 
 
     th { 
 
      border: 1px solid black; 
 
      padding: 10px; 
 
     } 
 

 
     table td.crossed { 
 
      background-image: -webkit-linear-gradient(top left, transparent, red, transparent); 
 
      background-image: -moz-linear-gradient(top left, transparent, red, transparent); 
 
      background-image: -o-linear-gradient(top left, transparent, red, transparent); 
 
      background-image: linear-gradient(to bottom right, transparent, red, transparent); 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
<table id="t1"> 
 
    <tr> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     <th></th> 
 
     <th> 
 
      <input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="addRow()" /> 
 
     </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td>1.</td> 
 
     <td> 
 
      <input type="checkbox" /> 
 
     </td> 
 
     <td> 
 
      <input type="date" id="mydate" class="myclass"> 
 
     </td> 
 
     <td contenteditable='true'></td> 
 
     <td> 
 
      <input type="button" value="Delete Row" onclick="deleteRow(this)" /> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<script> 
 
    function createRowColumn(row) { 
 
     var column = document.createElement("td"); 
 
     row.appendChild(column); 
 
     return column; 
 
    } 
 

 

 
    function addRow() { 
 
     var newrow = document.createElement("tr"); 
 
     var numericColumn = createRowColumn(newrow); 
 
     var checkColumn = createRowColumn(newrow); 
 
     var dateColumn = createRowColumn(newrow); 
 
     var emptyColumn = createRowColumn(newrow); 
 
     var removeColumn = createRowColumn(newrow); 
 

 
     var checkbox = document.createElement("input"); 
 
     checkbox.setAttribute("type", "checkbox"); 
 
     checkColumn.appendChild(checkbox); 
 

 
     var datebox = document.createElement("input"); 
 
     datebox.setAttribute("type", "date"); 
 
     datebox.setAttribute("class", "myclass"); 
 

 
     dateColumn.appendChild(datebox); 
 

 
     emptyColumn.setAttribute("contenteditable", "true"); 
 

 
     var remove = document.createElement("input"); 
 
     remove.setAttribute("type", "button"); 
 
     remove.setAttribute("value", "Delete Row"); 
 
     remove.setAttribute("onClick", "deleteRow(this)"); 
 
     removeColumn.appendChild(remove); 
 

 
     var table = document.getElementById('t1'); 
 
     var tbody = table.querySelector('tbody') || table; 
 
     var count = tbody.getElementsByTagName('tr').length; 
 
     numericColumn.innerText = count.toLocaleString() + '.'; 
 

 
     tbody.appendChild(newrow); 
 
    } 
 

 
    function deleteRow(button) { 
 
     var row = button.parentNode.parentNode; 
 
     var tbody = row.parentNode; 
 
     tbody.removeChild(row); 
 

 

 
     var rows = tbody.getElementsByTagName("tr"); 
 
     for (var i = 1; i < rows.length; i++) { 
 
      var currentRow = rows[i]; 
 
      currentRow.childNodes[0].innerText = i.toLocaleString() + '.'; 
 
     } 
 

 
    } 
 
    var cb = document.querySelectorAll('input[type="checkbox"]')[0]; 
 
    var td = document.querySelectorAll("td[contenteditable]")[0]; 
 

 
    cb.addEventListener("click", function() { 
 
     if (cb.checked) td.classList.add("crossed"); 
 
     else td.classList.remove("crossed"); 
 
    }); 
 

 
    function hasClass(elem, className) { 
 
     return elem.className.split(' ').indexOf(className) > -1; 
 
    } 
 

 
    document.addEventListener('change', function (e) { 
 
     if (hasClass(e.target, 'myclass')) { 
 
      var selectedDateFromCalendar = new Date(e.target.value); 
 

 
      var currentdate = new Date(); 
 

 
      var Diff = new Date(selectedDateFromCalendar) - currentdate; 
 

 
      var diffDays = Math.ceil(Diff/(1000 * 3600 * 24)); 
 

 
      if ((selectedDateFromCalendar) - currentdate < 0) { 
 
       alert("out of date"); 
 
      } 
 
      else if ((selectedDateFromCalendar) - currentdate >= 1) { 
 
       alert("last " + diffDays + " day"); 
 
      } 
 
     } 
 

 
    }, false); 
 

 
</script> 
 
</body> 
 
</html>

與幫助從ram swaroop，Dave和森達維達斯

有一個愉快的一天！

來源

2015-12-22 19:56:44 Vinc

我使用document.querySelectorAll（）來解決我的問題嗎？ @ user5626587 – user5695111

使用Javascript中的按鈕進行函數調用

回答

相關問題