javascript - 将带有选择字段的表转换为js数组

Question

function extractTable() {

    var csvTable = document.querySelector("#csv_table");
    var newTableObj = [];
    var tableRows = [].reduce.call(csvTable.rows, function(res, row) { 
              
        res[row.cells[0].textContent] = row.cells[1].textContent;
        return res
      
    }, {});
    delete tableRows['Column value']; // Removes the header row

    // Create an object
    newTableObj.push(tableRows);
    console.log(newTableObj);

    // Create a JSON
    let jsonTable = JSON.stringify(tableRows, null, 2);
    console.log(jsonTable);
};

<table id="csv_table" class="sms_table">
	<thead>
		<tr>
			<th>Column value</th>
			<th>Field</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Name</td>
			<td>
				<select id="select_path" class="field_select">
					<option selected="selected" value="">Please assign a Field</option>
					<option value="a">A</option>
					<option value="b">B</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Prefix</td>
			<td>
				<select id="select_path" class="field_select">
					<option selected="selected" value="">Please assign a Field</option>
					<option value="a">A</option>
					<option value="b">B</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>First</td>
			<td>
				<select id="select_path" class="field_select">
					<option selected="selected" value="">Please assign a Field</option>
					<option value="a">A</option>
					<option value="b">B</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Last</td>
			<td>
				<select id="select_path" class="field_select">
					<option selected="selected" value="">Please assign a Field</option>
					<option value="a">A</option>
					<option value="b">B</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>
<button id="extractTable" onclick="extractTable()">Extract table</button>

我有一个简单的两列表，它是根据解析的 CSV 文件的结果生成的。左列包含提取的所有值，右列是一系列下拉列表，人们可以选择一个值。

我有一些代码可以遍历行并提取值，然后我可以将其放入多维数组或 JSON 中。

我希望能够存储这些以供其他地方使用，但似乎完全无法提取下拉字段的值。有人可以帮我吗？

我的 HTML 表格是这样的:

<table id="csv_table" class="sms_table">
    <thead>
        <tr>
            <th>Column value</th>
            <th>Field</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td>
                <select id="select_path" class="field_select">
                    <option selected="selected" value="">Please assign a Field</option>
                    <option value="a">A</option>
                    <option value="b">B</option>
                </select>
            </td>
        </tr>
        <tr>
           <td>Prefix</td>
           <td>
                <select id="select_path" class="field_select">
                    <option selected="selected" value="">Please assign a Field</option>
                    <option value="a">A</option>
                    <option value="b">B</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<button id="extractTable" onclick="extractTable()">Extract table</button>

我的JS是:

function extractTable() {
    var csvTable = document.querySelector("#csv_table");
    var newTableObj = [];
    var tableRows = [].reduce.call(csvTable.rows, function(res, row) {           
        res[row.cells[0].textContent] = row.cells[1].textContent;
        return res
    }, {});
    delete tableRows['Column value']; // Removes the header row

    // Create an object
    newTableObj.push(tableRows);
    console.log(newTableObj);

    // Create a JSON
    let jsonTable = JSON.stringify(tableRows, null, 2);
    console.log(jsonTable);
};

我的示例代码笔在这里:https://codepen.io/AllenT871/pen/XoazJz?editors=1011#

感谢您提供的任何帮助。

Answer 1

您可以使用 document.getElementsByClassName 仅获取选择器，而不是获取所有表。 Ødocument.getElementsByTagName

然后你可以迭代(但它不是一个迭代，你不能使用 map 或 reduce )并获取每个选择的选定值。

希望对你有帮助

所有代码:

function extractTable() {
    var tableItems = document.getElementsByClassName("field_select");
    var tableRows = [];       

    for(var i = 0; i<tableItems.length; i++){
      var e = tableItems[i]
      var option = e.options[e.selectedIndex].value;
      console.log(option)
      tableRows.push(option);
    }

    // Create a JSON
    let jsonTable = JSON.stringify(tableRows, null, 2);
    console.log(jsonTable);
};