使用Javascript克隆表;但有些值在克隆后不再有用

Question

我有一个称为模板的表格，另一个称为附件的克隆。我遇到了一个问题，名为episodes_airdate的输入字段显示在模板表中使用Javascript提供的相同信息。

下面是模板表的HTML：

<table id="template" style="display: none;" cellpadding="0px 20px" cellspacing="0px 20px"> 
    <tbody><tr class="line"> 
     <td width="100%"> 

     <p> 
     <label>Season:</label> 
       <select name="episode_season[]" select="" id="episode_season[]" class="season regular-text" style="width:50px; float:left; margin-right:10px;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option></select>  </p> 


     <label>Episode:</label> 
     <p> 
       <select name="episode_number[]" select="" id="episode_number[]" class="number regular-text" style="width:50px; float:left;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option></select>  </p> 

     <label>Title:</label> 
     <p> 
      <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:400px;"> 
     </p>  


     <label>Airdate</label> 
     <p> 
        <script> 
     function datepopulate(){ 
    var day = document.getElementById('airdate_day').value; 
    var month = document.getElementById('airdate_month').value; 
    var year = document.getElementById('airdate_year').value; 
    var completedate = day+'-'+month+'-'+year; 
    document.getElementById('episode_airdate[]').value = completedate; 
     alert(document.getElementById('episode_airdate[]').value); 
    return true; 
} 

     </script> 
    <select id="airdate_year" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">2012</option><option value="1910">1910</option><option value="1911">1911</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option></select><select id="airdate_month" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><select name="airdate_day" id="airdate_day" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">10</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 
     <input type="hidden" name="episode_airdate[]" id="episode_airdate[]" class="airdate regular-text" value="--"> 

     </p> 

     <p> 
     <label>Plot:</label> 
      <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text" value="" cols="100%" rows="10" tabindex="4"></textarea> 
     </p> 
     </td> 



     <td width="10%" class="commands"> 
      <a rel="delete" class="button">-</a> <a rel="add" class="button">+</a> 
     </td> 
    </tr> 
</tbody></table> 

下面是附件表中的HTML

<table id="attachments" style="border-spacing: 0px 30px;"> 

<tbody><tr class="line"> 
     <td width="100%"> 

     <p> 
     <label>Season:</label> 
       <select name="episode_season[]" select="" id="episode_season[]" class="season regular-text" style="width:50px; float:left; margin-right:10px;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option></select>  </p> 


     <label>Episode:</label> 
     <p> 
       <select name="episode_number[]" select="" id="episode_number[]" class="number regular-text" style="width:50px; float:left;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option></select>  </p> 

     <label>Title:</label> 
     <p> 
      <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:400px;"> 
     </p>  


     <label>Airdate</label> 
     <p> 

    <select id="airdate_year" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">2012</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option></select><select id="airdate_month" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><select name="airdate_day" id="airdate_day" onchange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;"><option value="">10</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 
     <input type="hidden" name="episode_airdate[]" id="episode_airdate[]" class="airdate regular-text" value=""> 

     </p> 

     <p> 
     <label>Plot:</label> 
      <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text" value="" cols="100%" rows="10" tabindex="4"></textarea> 
     </p> 
     </td> 



     <td width="10%" class="commands"> 
      <a rel="add" class="button">+</a> 
     </td> 
    </tr></tbody></table> 

这是一个JavaScript模板表添加3个选择选项统称 airdate_year，airdate_month和airdate_day以创建1个值，名为episode_airdate witch是一个隐藏输入。

<table id="template" style="display: none;" cellpadding="0px 20px" cellspacing="0px 20px"> 
    <tr class="line"> 
     <td width="100%"> 

     <p> 
     <label><?php _e('Season:'); ?></label> 
       <?php 

       for($i=1; $i<=50; $i++) 
        $season_nums[]=$i; 

       echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="width:50px; float:left; margin-right:10px;">'; 
        echo '<option value="">' . __("0") . '</option>'; 
        foreach($season_nums as $season_num){ 
         $selected = ''; 
         echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>'; 
        } 
       echo '</select>'; 
       ?> 
     </p> 


     <label><?php _e('Episode:'); ?></label> 
     <p> 
       <?php 

       for($i=1; $i<=50; $i++) 
        $episode_nums[]=$i; 

       echo '<select name="episode_number[]" select id="episode_number[]" class="number regular-text" style="width:50px; float:left;">'; 
        echo '<option value="">' . __("0") . '</option>'; 
        foreach($episode_nums as $episode_num){ 
         $selected = ''; 
         echo '<option value="' . $episode_num . '" ' . $selected . '>' . $episode_num . '</option>'; 
        } 
       echo '</select>'; 
       ?> 
     </p> 

     <label><?php _e('Title:'); ?></label> 
     <p> 
      <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:400px;" /> 
     </p>  


     <label><?php _e('Airdate'); ?></label> 
     <p> 
        <script> 
     function datepopulate(){ 
    var day = document.getElementById('airdate_day').value; 
    var month = document.getElementById('airdate_month').value; 
    var year = document.getElementById('airdate_year').value; 
    var completedate = day+'-'+month+'-'+year; 
    document.getElementById('episode_airdate[]').value = completedate; 
     alert(document.getElementById('episode_airdate[]').value); 
    return true; 
} 

     </script> 
    <?php 

       for($i=1910; $i<=2012; $i++) 
        $years[]=$i; 

       echo '<select id="airdate_year" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">'; 
        echo '<option value="">' . __("2012") . '</option>'; 
        foreach($years as $year){ 
         $selected = ''; 
         echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>'; 
        } 
       echo '</select>'; 


       for($i=1; $i<=12; $i++) 
        $months[]=$i; 

       echo '<select id="airdate_month" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">'; 
        echo '<option value="">' . __("0") . '</option>'; 
        foreach($months as $month){ 
         $selected = ''; 
         echo '<option value="' . $month . '" ' . $selected . '>' . $month . '</option>'; 
        } 
       echo '</select>'; 


       for($i=1; $i<=31; $i++) 
        $days[]=$i; 

       echo '<select name="airdate_day" id="airdate_day" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">'; 
        echo '<option value="">' . __("10") . '</option>'; 
        foreach($days as $day){ 
         $selected = ''; 
         echo '<option value="' . $day . '" ' . $selected . '>' . $day . '</option>'; 
        } 
       echo '</select>'; 
       ?> 
     <input type="hidden" name="episode_airdate[]" id="episode_airdate[]" class="airdate regular-text" value=""> 

     </p> 

     <p> 
     <label><?php _e('Plot:'); ?></label> 
      <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea> 
     </p> 
     </td> 



     <td width="10%" class="commands"> 
      <a rel="delete" class="button">-</a> <a rel="add" class="button">+</a> 
     </td> 
    </tr> 
</table> 

我创建表“附件”举办的“模板”的克隆值

<table id="attachments" style="border-spacing: 0px 30px;"> 

</table> 

然后，这是我用做克隆，并在表格中显示的结果脚本“附件”。我认为这个问题可能与脚本有关，因为如果我使用模板表，它可以正常工作;然而，在克隆中使用此脚本后，隐藏的输入字段“episode_airdate”返回空白。所以我不确定我需要修改函数“datepopulate”和下面这个。

<script> 
(function($) 
{ 
    lines = 0; 

    function items_init() 
    { 
     <?php $episodes = get_post_meta($post->ID, 'episodes', true) ?> 

     <?php if (empty($episodes)) : ?>     
     items_add(); 
     <?php else: ?> 

     <?php 
     // Get serialized data 
     $episodes = unserialize($episodes); 

    // Compare episode numbers 
      function compare_number($a, $b) { 
    if ($a['season'] == $b['season']) { 
     return $b['number'] - $a['number']; } 

    return strnatcmp($b['season'], $a['season']); 
    } 

    // Sort by episode number 
    usort($episodes, 'compare_number'); 


     // Show episodes 
     foreach ($episodes as $episode) : 
     ?> 
     items_add({ 
      title: '<?php echo base64_decode($episode['title']) ?>', 
      airdate: '<?php echo $episode['airdate'] ?>', 
      season: '<?php echo $episode['season'] ?>', 
      number: '<?php echo $episode['number'] ?>', 
      plot: '<?php echo base64_decode($episode['plot']) ?>', 

     }); 
     <?php endforeach ?> 
     <?php endif ?> 

     // Delete the "-" button in first row 
     $('#attachments tr:first-child .commands a[rel="delete"]').remove(); 
    } 

    function items_add() 
    { 
     obj = $('#template tr').clone().appendTo('#attachments'); 
     lines++; 

     if (arguments.length > 0) { 
      options = arguments[0]; 
       var day = document.getElementById('airdate_day').value; 
    var month = document.getElementById('airdate_month').value; 
    var year = document.getElementById('airdate_year').value; 

      $('.title', obj).val(options.title); 
      $('.airdate', obj).val(options.airdate); 
      $('.season', obj).val(options.season); 
      $('.number', obj).val(options.number); 
      $('.plot', obj).val(options.plot); 
     } 
    } 

    $('#attachments').delegate('.commands a', 'click', function() 
    { 
     var action = $(this).attr('rel'); 
     var confirm_delete = true; 

     // Add action 
     if ('add' == action) { 
      items_add(); 
     } 

     // Delete action 
     if ('delete' == action) { 
      // La TR en la tabla 
      var oTr = $(this).parent().parent(); 
      var episode_name = $('.title', oTr).val(); 
      var episode_airdate = $('.airdate', oTr).val(); 
      var episode_season = $('.season', oTr).val(); 
      var episode_number = $('.number', oTr).val(); 
      var episode_plot = $('.plot', oTr).val(); 


      if (episode_name != '' || episode_number != '' || episode_plot != '') { 
       if (!confirm('Are you sure you want to delete ' + episode_name + '?')) { 
        confirm_delete = false; 
       } 
      } 

      if (confirm_delete) { 
       oTr.next().remove(); oTr.remove(); 
       lines--; 
      } 
     } 
    }); 

    $(document).ready(function() 
    { 
     items_init(); 
    }); 

})(jQuery); 

</script> 

Answer 1

datepopulate()？如果是，你只会认为它不起作用。由于在执行document.getElementById时，您获得了具有相同ID的多个项目，它将返回它找到的第一个项目（ids应该是唯一的，btw），它们是模板中的项目。

尝试：

function datepopulate(){ 
    var parent = $(this).parent(); 
    var day = document.getElementById('airdate_day').value; 
    var month = document.getElementById('airdate_month').value; 
    var year = document.getElementById('airdate_year').value; 
    var completedate = day+'-'+month+'-'+year; 
    $('episode_airdate[]', parent)[0].value = completedate; 
    alert($('episode_airdate[]', parent)[0].value); 
    return true; 
} 

Answer 2

你需要做的..

newObj = $('#something tr').clone(true, true); 
// For cloning events and data, as well as deep copying