我有一個稱爲模板的表格,另一個稱爲附件的克隆。我遇到了一個問題,名爲episodes_airdate
的輸入字段顯示在模板表中使用Javascript提供的相同信息。使用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>
你需要克隆具有相同的表「模板」,或者您需要增加一些新的東西? – 2012-04-20 20:08:38
@JorgeOlivares同樣,它只是它沒有通過airdate_year,airdate_month和airdate_day,所以我可以將它保存在隱藏的輸入episode_airdate – Craig 2012-04-20 20:15:41
那麼..如果你做這樣的whis jQuery? $( '#附件')HTML($( '#模板')HTML()); – 2012-04-20 20:21:21