提问者:小点点

使用jquery来获取。php表中元素的html(),其中mysql行被“回显”-仅从第一个表中获取元素


我正在创建一个基于事件的网站。为了缩短问题,我将举一个最小的例子。

我有一件事。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)

我的编码肯定不是最好的,所以如果你注意到我“不应该”做的任何事情,或者知道实现我想要的效果的更简单的方法,我很乐意听到!干杯


共1个答案

匿名用户

你在这里做什么:

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>