使用Javascript克隆了一个表；但是，某些值在克隆后不再起作用

我有一个名为template的表和另一个名为attachments的克隆表。我很难获得一个名为Spices_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\u year、airdate\u month和airdate\u day生成一个名为“插曲\u airdate”的值，该值是一个隐藏输入

<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>

然后这就是我用来进行克隆并在表附件中显示结果的脚本。我认为问题可能出在脚本上，因为如果我使用模板表，它工作得很好；但是，在将此脚本与克隆一起使用后，隐藏的输入字段eposion\u 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>

日期填充？如果是，你只相信它不起作用。由于在执行document.getElementById时获得了多个具有相同id的项，因此它返回它找到的第一个项。顺便说一句，id应该是唯一的，并且它们是来自模板的

尝试：

你需要做

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

---

你需要用相同的复制表“模板”，或者你需要添加一些新内容？@JorgeOlivares相同，只是它没有经过airdate\u year、airdate\u month和airdate\u day，所以我可以将它保存在隐藏的输入插曲中\u airdate怎么样。。如果你做了这样的事情，那么jQuery？$'附件“.html$”模板“.html；你是如何注意到这种行为的？你会说这更像是一个PHP文件，或者JavaScript，或者HTML？我一直不明白为什么人们把PHP中的字符串文字标记放在标记中。。。为什么不直接跳回HTML呢？不管怎样，我不明白这样清晰地思考代码是怎么可能的。一团糟。正如Prusse所说，一次只处理一个方面JS或PHP，或者其他更有意义的东西。只是尝试了一下，运气不好，它也没有返回警报消息。

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