将有序列表放在表格行中。可能吗?

时间:2014-01-22 10:27:00

标签: javascript jquery html

我这里有一个放置有序列表的示例代码(1,2,3 ......):

这是我的JScipt:

<script type="text/javascript">
    $(document).ready(function() {
    $("ul").each(function() {
     $(this).find("li").each(function(count) {
        $(this)
          .css("list-style-type", "none")
          .prepend("<div class='listnumber'>" + (count + 1) + ".</div>");
     });
  });
  })    
</script>

对于HTML,简单如下:

<ul>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>CakePHP</li>
 </ul>

对于CSS:

<style type="text/css">
 .listnumber
 {
    display: inline-block;
    padding-right: 3px;
 }
</style>

使用:1.9.1.js,这完美有效。我想要的是如何编号表中的所有数据。或者如何将标记<ul><li></li></ul>放在<tr><td></td></tr>

我试过了:

<ul> 
    <li>
      <tr>
        <td>
          CSS
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          CSS3
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          PHP
        </td>
      </tr>
   </li>

   <li>
      <tr>
        <td>
          CakePHP
        </td>
      </tr>
   </li>

  </ul>

但编号不起作用。这是为什么?让我明白是另一个学习对我来说。提前谢谢。

1 个答案:

答案 0 :(得分:0)

<table>
    <tr><td class="nr"></td><td>This</td></tr>
    <tr><td class="nr"></td><td>should</td></tr>
    <tr><td class="nr"></td><td>work...</td></tr>   
</table>

<script type="text/javascript">
    var a = document.getElementsByClassName("nr");
    for (var i = 0; i < a.length; i++) {
        a[i].innerHTML = (i+1)+".";
    }
</script>