Question

我有两个<ul> <li>结构，中间有一个table，这样

<ul>
    <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
    <li> 
      <!-- First read that contains only label inside -->
      <label>6#</label> 
    </li>
</ul>
<table>
    <tbody>
        <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
                <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
        <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
    </tbody>
</table>
<ul>
    <li>
       <label>7#</label> <input type="text" value="" />
    </li>
       <li>
   <label>8#</label> <input type="text" value="" />
</li>
<li>
   <label>9#</label> <input type="text" value="" />
</li>
<li>
   <label>10#</label> <input type="text" value="" />
</li>
</ul>

我需要动态抓取上面只有<li>标记的<label>表，并将其转换为表格的标题。以这种方式获得最终结果。

<ul>
    <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>

</ul>
<table>
    <thead>
        <tr>
          <th> <label>6#</label> </th>
        <tr>
   </thead>
    <tbody>
        <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
                <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
        <tr>
        <td>#1</td>
        <td>#2</td>
        <td>#3</td>
        </tr>
    </tbody>
</table>
<ul>
    <li>
       <label>7#</label> <input type="text" value="" />
    </li>
       <li>
   <label>8#</label> <input type="text" value="" />
</li>
<li>
   <label>9#</label> <input type="text" value="" />
</li>
<li>
   <label>10#</label> <input type="text" value="" />
</li>
</ul>

你可以这样做吗？...

DEMO CODE

Answer 1

更多jQuery-ish方式：

循环遍历li元素，找到只有1个孩子的元素，其中该子元素为label。

构建thead/tr/th，附加label，将其添加到表中，然后移除用于保存它的li。

var lbl = null;

$('li').each(
    function() {
        var li = $(this);

        if (li.children().length == 1)
        {
            var labels = li.find('label');
            if (labels.length == 1)
            {
                lbl = labels;
                return false;
            }
        }
    }
);

if (lbl)
{
    var text = lbl.text();
    var li = lbl.closest('li');

    var thead = $('<thead>');
    var tr = $('<tr>').appendTo(thead);
    var th = $('<th>').appendTo(tr).append(lbl);

    li.remove();

    $('table').prepend(thead);
}

示例：http://jsfiddle.net/FGJLg/9/

如何捕获标签的内容以成为表的精确标题

1 个答案: