Question

我的测试项目的任务很小，我必须制作一个像表格一样的列表视图。

与下面的代码段类似。

＆＃13;

function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
    
}

var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;

function fnselect(){
var $row=$(this).parent().find('td');
    var clickeedID=$row.eq(0).text();
   // alert(clickeedID);
}

$("#tst").click(function(){
    var value =$(".selected td:first").html();
    value = value || "No row Selected";
    alert(value);
});

＆＃13;

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}

.selected {
    background-color: brown;
    color: #FFF;
}

＆＃13;

<table id="table">
    <tr>
        <td>1 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>2 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>3 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
</table>
<input type="button" id="tst" value="OK" onclick="fnselect()" />

＆＃13;

此代码来自＆＃39; http://jsfiddle.net/sunil_hari/Z22NU/17/＆＃39;

在此，我想用html中的列表标记<th> <td>替换表格标记<ul> <li>。

这是我的导师的要求，对我来说非常困难，因为我不熟悉UI（html，css）。

请给我一些建议或实例来实现这一使命。

提前致谢。

Answer 1

最好的方法是在css中使用table display属性。因为在table视图中将使用auto-Cell调整大小，并且在使用显示属性时可以使用使用tr td table的所有功能，但合并单元格除外。我试了一下请看一下。仅与css合作。

div{
  display:table;
  border-collapse:sepearte
}
ul{
  display:table-row
}
li{
  display:table-cell;
  border:1px solid #dfdfdf;
  padding:5px;
}

<div>
<ul>
   <li>
       1 Ferrari F138
   </li>
   <li>
       1 200€
   </li>
   <li>
       1 200€
   </li>
   <li>
     odel monopostu stajne Scuderia Ferrari pre sezónu 2013
   </li>
   <li>
       1 200€
   </li>
</ul>
<ul>
   <li>
       1 Ferrari F138
   </li>
   <li>
       1 200€
   </li>
   <li>
       1 200€
   </li>
   <li>
     odel monopostu stajne Scuderia Ferrari pre sezónu 2013
   </li>
   <li>
       1 200€
   </li>
</ul>
<ul>
   <li>
       1 Ferrari F138
   </li>
   <li>
       1 200€
   </li>
   <li>
       1 200€
   </li>
   <li>
     odel monopostu stajne Scuderia Ferrari pre sezónu 2013
   </li>
   <li>
       1 200€
   </li>
</ul>
<ul>
   <li>
       1 Ferrari F138
   </li>
   <li>
       1 200€
   </li>
   <li>
       1 200€
   </li>
   <li>
     odel monopostu stajne Scuderia Ferrari pre sezónu 2013
   </li>
   <li>
       1 200€
   </li>
</ul><ul>
   <li>
       1 Ferrari F138
   </li>
   <li>
       1 200€
   </li>
   <li>
       1 200€
   </li>
   <li>
     odel monopostu stajne Scuderia Ferrari pre sezónu 2013
   </li>
   <li>
       1 200€
   </li>
</ul>
</div>

请参阅小提琴here

Answer 2

使用无序列表和div元素

可以实现表格效果

    <div class="wrapper">
    <ul class="itemrow">
        <li><div>1one</div></li>
        <li><div>1two</div></li>
        <li><div>1three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>2one</div></li>
        <li><div>2two</div></li>
        <li><div>2three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>3one</div></li>
        <li><div>3two</div></li>
        <li><div>3three</div></li>

    </ul>
</div>

这将是你的css

.wrapper{
    width:600px;
}
.itemrow{
    margin:0;
    padding:0;
}

.itemrow li{
    float:left;
    margin-bottom:0px;
}
.itemrow li div{
    width:198px;
   border-style:solid;
    border-width: 1px;
    border-color:black;
}

Answer 3

简单地说，您可以使用以下代码使用<ul> <li>标记创建类似于表的视图：

<ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 3</li>
</ul>

编辑：

注意：您可以根据上述代码中的要求更改高度宽度。

这是一篇很好的文章，很可能解释了你需要做什么：

http://alistapart.com/article/taminglists

我怎么用html，css这样做？不是表格标签，只需使用列表标签ex）<li> <ol> <ul>

3 个答案: