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

Question

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

我有一个 event.php 页面，其中有一个包含每个月的下拉菜单。下面是一组 php 包括每个月的一个，即。 （jan.php，feb.php）。因此，当您单击下拉菜单中的“一月”时，会显示 jan.php。

每个事件都是它自己的表，并且每个表都有多行，但为此我“回显”了 3 行 - 显示名称、日期、时间。

现在我的 jquery 正在提供格式化时间和日期的预期效果（将时间缩短为 08:00:00 而不是 08:00:00.0000...等，并且对于它从 YYYY/ 获取的日期） MM/DD 到 DD/MM/YYYY。

我的问题是 - 对于每个跨度 class="._start"，当它复制 class="_startplace"（格式化的日期/时间）的 html 时，它只会复制第一个，并将其添加到 . _start 在每张桌子上（事件）

即。表格1 ： 鲍勃烧烤 08:00:00 2015 年 12 月 2 日

表 2： 苏西的派对 09:00:00 13/02/2015

表 3、表 4 等...

所以每个表都有自己的 span._start，我需要每个表都填写相应的时间，即 表 1 的跨度 class="_start" 需要说 08:00:00 表 2 的跨度 class="_start" 需要说 09:00:00。 目前，表 1 中的 span class="start" 表示 08:00:00，表 2 中的 span class="_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 TABLE 行创建一个新的 HTML TABLE，然后我试图定位在 HTML 中显示的输出数据的单元格使用 jquery 的表，格式化该数据（即 substr 并使用子字符串创建新变量以从 YYYY/MM/DD 切换到 DD/MM/YYYY），然后将该格式化数据复制到具有“_start”类的跨度中。我既可以只显示第一个表的“_start”中的数据，也可以在页面上的所有“_start”跨度中显示第 1 行（sql 行）中单元格的格式化数据。我需要每个 HTML 表充当 1 个“事件”（想想日历），并将 PHP 和 SQL 输出的日期和时间行格式化为特定格式，并复制到一个包含在“a参考文献”。为什么我需要格式化日期和时间的示例https://addthisevent.com/

我的编码肯定不是最好的，所以如果你注意到我“不应该”做的任何事情，或者知道更简单的方法来达到我想要的效果，我会很高兴听到它！ 干杯！

Answer 1

你在这里做什么：

var startdate = $('._startplace').html();

不正确。当您使用$('._startplace') 时，您实际上获得了所有 匹配元素。然后，调用 .html() 只会返回 first 元素的 HTML。

当您稍后使用$('._start, ._end').html(subfull + " " + starttime); 时，您再次拥有所有匹配的元素，但是您正在向它写入 HTML（而不是从中读取），这意味着所有元素都已更新。

相反，您需要遍历所有元素，例如这样：

$('td.column').each(function(){
    var x = $(this).find('.start_place').html();
    // do stuff with x
    $(this).find('.start, .end').html(x);
});

您使用.each() 循环遍历所有表格单元格。然后，对于每个单元格，您 .find() .start_place 跨度，计算正确的值，然后再次 .find() .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>