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);
};

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

1 个答案: