Question

我有这样的选择，

<select id="select_id" multiple="">
    <optgroup label="Group1">
        <option value="option1">OPtion</option>
        <option value="option2">OPtion</option>
        <option value="option3">OPtion3</option>
    </optgroup>
    <optgroup label="Group2">
        <option value="option4">OPtion4</option>
        <option value="option5">OPtion5</option>
        <option value="option6">OPtion6</option>
    </optgroup>
</select>

我想将此select转换为HTML表格。我该怎么转换呢？

<table>
<tr><td rowspan="4">Group1</td></tr>
    <tr><td>option1</td></tr>
    <tr><td>option2</td></tr>
    <tr><td>option3</td></tr>
<tr><td rowspan="4">Group2</td></tr>
    <tr><td>option4</td></tr>
    <tr><td>option5</td></tr>
    <tr><td>option6</td></tr>
</table>

Answer 1

你可能想要这样的东西：https://github.com/Jxck/html2json

示例：

var json = html2json(document.body.innerHTML);

如果这个特定的图书馆不符合您的口味，快速谷歌搜索会发现有很多工具可以做到这一点。

一般情况下，您希望检查已存在的解决方案，而不仅仅是自制的解决方案。如果其他人已经完成了所有艰苦的工作，为什么不利用！

Answer 2

我得到了这个问题的答案，

 var maketable ='<table>'
 $('#select_id optgroup').each(function () {
       var label_count = $(this).find('option').length;
       var rowsspancount = parseInt(label_count) + 1;
       maketable = maketable + '<tr><td rowspan="' + rowsspancount + '">' + this.label + '</td></tr>';
       $(this).find('option').map(function () {
       maketable = maketable + '<tr><td>' + $(this).text() + '</td></tr>';
   });
 });
 maketable = maketable + '</table>'
 alert(maketable );

如何将带有optgroup的html选择转换为HTML表格

2 个答案: