我正在创建一个基于事件的网站。为了缩短问题,我将举一个最小的例子。
我有一件事。php页面,带有下拉菜单,其中包含每个月。下面是一组php包含,每个月一个,即(jan.php,feb.php)。因此,当您单击下拉列表中的“一月”时,jan.php将显示。
每个事件都是它自己的表,并且每个表都有多行,不过为了这个目的,我“回显”了3行-showname、date、time。
现在我的jQuery给出了格式化时间的预期效果
我的问题是-对于每个span class=“.u start”,当它复制class=“\u startplace”(格式化的日期/时间)的html时,它只会复制第一个,并将其添加到_从每个表开始(事件)
即。表1:鲍勃烧烤08:00:00 12/02/2015
表2:Suzy的派对2015年2月13日09:00:00
表3、表4等。。。
因此,每个表都有自己的跨度_开始,我需要每个表都填写相应的时间,即表1的span class=“\u start”需要说08:00:00表2的span class=“\u start”需要说09:00:00。目前,表1中的span class=“start”表示08:00:00,表2中的span class=“\u start”表示08:00:00
有没有办法解决这个问题?我基本上是在寻找一种方法来“绑定”格式,然后“复制”到每个特定的表。
每个“月”。php是这样的(注意缩写版本)
var startdate = $('._startplace').html();
var subyear = (startdate).substr(0, 4);
var submonth = (startdate).substr(5, 2);
var subday = (startdate).substr(8, 2);
var starttime = (startdate).substr(11, 8);
var subfull = (subday + "-" + submonth + "-" + subyear);
$('._start, ._end').html(subfull + " " + starttime);
$sql = "SELECT id, date, time FROM january ORDER by date ASC, time ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo 'Show';
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<table class='col-lg-12' id='event-container_'>
<th>
<h1 class='event-title-words'>". $row["showname"]. "</h1>
</th>
<tr id='event-table_'>
<td class='column'>
<span class='_startplace'>" . $row["date"]. " " . $row["time"]. "</span>
<a href='http://example.com/link-to-your-event' title='Add to Calendar' class='addthisevent' id='addevent'>
Add to Calendar
<span class='_start'></span>
<span class='_end'></span>
</a>
</td>
</tr>
</table>
}
echo "Done";
} else {
echo "0 results";
}
$conn->close();
?>
编辑:基本上,我有一个sql表中的数据通过PHP以表的形式输出,每个sql表行创建一个新的HTML表,然后我尝试用jquery将输出数据的单元格作为目标,格式化该数据(即substr)
我的编码肯定不是最好的,所以如果你注意到我“不应该”做的任何事情,或者知道实现我想要的效果的更简单的方法,我很乐意听到!干杯
你在这里做什么:
var startdate = $('._startplace').html();
是不正确的。当您使用$('._startplace')
时,您实际上得到了所有匹配的元素。然后,调用. html()
,只会返回第一个元素的超文本标记语言。
以后使用$('.\u start,.\u end')时。html(次完整的“开始时间”)代码>,您再次拥有所有匹配的元素,但随后您将向其中写入HTML(而不是从中读取),这意味着所有元素都将更新。
相反,您需要循环遍历所有元素,例如:
$('td.column').each(function(){
var x = $(this).find('.start_place').html();
// do stuff with x
$(this).find('.start, .end').html(x);
});
使用. each()
循环遍历所有表单元格。然后,对于每个单元格,您将. search()
.start_place跨度,计算正确的值,然后再次. search()
. start和. end跨度,并向它们写入正确的值。
下面是一个简单的工作示例:
$('td.column').each(function(){
var startdate = $(this).find('._startplace').html();
var subyear = (startdate).substr(0, 4);
var submonth = (startdate).substr(5, 2);
var subday = (startdate).substr(8, 2);
var starttime = (startdate).substr(11, 8);
var subfull = (subday + "-" + submonth + "-" + subyear);
$(this).find('._start, ._end').html(subfull + " " + starttime);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class='col-lg-12' id='event-container_'>
<tr>
<th>Some title</th>
</tr>
<tr>
<td class='column'>
<span class='_startplace'>2015/02/13 17:15:00.0000</span>
<a href='#' title='Add to Calendar' class='addthisevent'>
Add to Calendar
<span class='_start'></span>
<span class='_end'></span>
</a>
</td>
</tr>
<tr>
<td class='column'>
<span class='_startplace'>2015/03/05 09:30:00.0000</span>
<a href='#' title='Add to Calendar' class='addthisevent'>
Add to Calendar
<span class='_start'></span>
<span class='_end'></span>
</a>
</td>
</tr>
</table>