Jquery在創建新行時沒有將索引添加到最後一行

請有人能告訴我爲什麼第一行得到並且索引值爲1，但其他每一行都得到1而不是2,3,4等等。Jquery在創建新行時沒有將索引添加到最後一行

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
</head> 

<body> 
    <form> 
     <table> 
      <thead> 
       <tr> 
        <th scope="col">Track</th> 
        <th scope="col">Album</th> 
        <th scope="col">Artist</th> 
       </tr> 
      </thead> 

      <tbody> 
       <tr> 
        <td><input name="track[0]" id="track"></td> 
        <td><input name="album[0]" id="album"></td> 
        <td> 
         <select name="artist[0]" id="artist"> 
          <option value="">Please select</option> 
          <option value="1">Joe Bloggs</option> 
          <option value="2">Jack Bloggs</option> 
          <option value="3">Tina Bloggs</option>        
         </select> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 

    <button>Add Row</button> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function($) 
    { 
     // trigger event when button is clicked 
     $("button").click(function() 
     { 
      // add new row to table using addTableRow function 
      addTableRow($("table")); 
      // prevent button redirecting to new page 
      return false; 
     }); 

     function addTableRow(table) 
     { 

      var $tr = $(table).find("tr:last").clone(); 
      alert($tr); 
      var fname = $("#track").attr("name"); 
       var nid = fname.match(/\[(.*?)\]/g); 
      var idx = nid[0]; 
      idx = idx.replace(/[[\]]/g,'') 
      var n = fname.split("["); 

      idx = parseInt(idx) + 1; 
      $tr.find("input,select").attr("name", n[0] + "[" + idx + "]"); 

      $(table).find("tbody tr:last").after($tr); 

     }; 
    }); 
    </script>  
</body>

我似乎無法工作，如何每增加每個表元素的「名」的時間由每天1準備使用AJAX的時間後添加一個新行。

來源

2013-03-27 user2215495

你有相同ID的多個元素。克隆行很好，但設置輸入的id並在選擇之後進行選擇。 – HMR 2013-03-27 12:21:00

新行被創建錯誤。藝術家和專輯內容名總是軌道[0]

那豈不是更容易做這樣的事情？

function addTableRow(table) { 

    var index = $(table).find("tbody tr").length; 
    var $tr = $(table).find("tr:last").clone(); 
    $tr.find("input,select").each(function (i, k) { 
     var old_name = $(k).attr("name"); 
     var new_name = old_name.replace(index-1, index); 
     $(k).attr("name", new_name); 
    }); 

    $(table).find("tbody tr:last").after($tr); 
};

DEMO

另外，考慮給予class，而不是在每一個input/select ID和給予id到行。合作會更容易。作爲@HMR說當克隆trinputs和select id也被克隆，添加行然後導致具有相同id的多個元素。這是不好的，確保每個元素作爲一個唯一的ID

來源

2013-03-27 12:30:26 letiagoalves

我同意，好的一個 – HMR 2013-03-27 12:33:59

雖然克隆tr的輸入和選擇id的也被克隆，添加行然後導致具有相同id的多個元素。我建議改變ID。 – HMR 2013-03-27 12:35:37

是的，我會在每個td中給一個類而不是一個id，並給該行賦予一個id。合作會更容易。 – letiagoalves 2013-03-27 12:38:39

如何只在tbody而是統計tr：

function addTableRow(table) 
    { 
     var $tr = table.find("tbody").find("tr").last().clone(); 
     var fname = $("#track").attr("name"); 
     var nid = fname.match(/\[(.*?)\]/g); 
     var new_idx = table.find('tbody').find('tr').length; 
     var n = fname.split("["); 

     idx = parseInt(idx) + 1; 
     $tr.find("input,select").attr("name", n[0] + "[" + new_idx + "]"); 

     $(table).find("tbody tr:last").after($tr); 

    };

來源

2013-03-27 12:36:00 gmaliar

Jquery在創建新行時沒有將索引添加到最後一行

回答

相關問題