嵌入到 HTML 中的 Javascript 和 CSS 不起作用

Question

我是新来的，所以如果我做错了什么，请纠正我。

基本上，我尝试创建一个“任务表”，用户除了可以在他们同意的情况下编辑任务外，还可以添加更多任务。我已经编写了一些表格(感谢 Ash Blue 提供的基本模板)，但我遇到了一些问题。

首先，如果将鼠标悬停在停止或暂停按钮上，您会看到它们左侧的按钮也会产生效果。接下来，“添加任务”和“导出任务”按钮不起作用。这是他们应该工作的:CodePen.最后，我还没有编写代码，但是额外行上的“开始/时间”时间框需要有不同的变量，否则当在一行上单击开始按钮时，所有行的所有秒表都会启动。抱歉，这不是很清楚，但如果您不明白，我会尝试更详细地解释。

这是当前代码:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>

<script>
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function() {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function() {
  $(this).parents('tr').detach();
});

$('.table-up').click(function() {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function() {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function() {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function() {
    headers.push($(this).text().toLowerCase());
  });

  // Turn all existing rows into a loopable array
  $rows.each(function() {
    var $td = $(this).find('td');
    var h = {};

    // Use the headers from earlier to name our hash keys
    headers.forEach(function(header, i) {
      h[header] = $td.eq(i).text();
    });

    data.push(h);
  });

  // Output the result
  $EXPORT.text(JSON.stringify(data));
});
</script>

<div class="container">
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>#</th>
        <th>Assignment Name</th>
        <th>Start / End</th>
        <th>Time Elapsed</th>
        <th>Suggested Time</th>
        <th>Controls</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true">1</td>
        <td contenteditable="true">Geometry</td>
        <td contenteditable="true">Start / End</td>
        <td contenteditable="true">Elapsed</td>
        <td contenteditable="true">25 min</td>
        <td>
        <span class="glyphicon glyphicon-play play">
              <span class="
glyphicon glyphicon-pause pause">

                <span class="glyphicon glyphicon-stop stop">

        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span><span class="table-remove glyphicon glyphicon-remove"></span>
        </td>

        <td>

        </td>
      </tr>
      <!-- This is our clonable table line -->
      <tr class="hide">
        <td contenteditable="true">Untitled</td>
        <td contenteditable="true">undefined</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up"></span>
          <span class="table-down glyphicon glyphicon-arrow-down"></span>
        </td>
      </tr>
    </table>
  </div>

  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>

<style>
.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}

.play {
  color: #209E00;
  cursor: pointer;
}
.play:hover {
  color: #5FCF00;
}

.pause {
  color: #F17400;
  cursor: pointer;
}
.pause:hover {
  color: #FF9E01;
}

.stop {
  color: #700;
  cursor: pointer;
}

span.stop:hover, span.stop:active {
  color: #f00;
}
</style>

如果我以后确实遇到同一张表的任何问题，我是否只发布另一个问题？还是我应该只编辑这篇文章？

Answer 1

你只需要关闭跨度标签:

<span class="glyphicon glyphicon-play play"></span>
<span class="glyphicon glyphicon-pause pause"></span>
<span class="glyphicon glyphicon-stop stop"></span>