使用 javascript jquery 3.5.1 获取所有表元素的值,包括 td、textarea 或 innerHtml 值



你能告诉我如何用jquery获取任何html表的元素值吗?我可以获得textarea值或td值,但我想同时检索这两个值,并在furure中检索更多值。现在我无法将修改后的文本区域值保存在本地文件中

注意:该表通常来自于导入json文件,该文件将与本地js服务器一起保存在本地

<html>
<head>
<title>Rockin' Page</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>  
</head>
<body>
<textarea id="textbox">Type something here</textarea> <button id="create">Sauvegarder</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>
<table id="example-table" class="table table-striped">
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</thead>
<tbody>
<tr id"pop1"><td><textarea class="textbox" id="col1">bla bla A1</textarea></td><td><textarea id="textbox">bla bla B1</textarea></td><td><textarea id="textbox">bla bla C1</textarea></td></tr>
<tr id"pop2"><td><textarea class="textbox" id="col2">bla bla A2</textarea></td><td><textarea id="textbox">bla bla B2</textarea></td><td><textarea id="textbox">bla bla C2</textarea></td></tr>
<tr id"pop3"><td><textarea class="textbox" id="col3">bla bla A3</textarea></td><td><textarea id="textbox">bla bla B3</textarea></td><td><textarea id="textbox">bla bla C3</textarea></td></tr>
<tr><td>A4</td><td>B4</td><td>C4</td></tr>
</tbody>
</table>
</body>
<script type="text/javascript">

(function Enregistrer() {
var textFile = null,
makeTextFile = function (text) {
var formattedText = text.replace(/n/g, 'rn') // garde les retours à la ligne in textarea
var data = new Blob([formattedText], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.createElement('a');
link.setAttribute('download', 'info.txt'); // nom fichier enregistré downloadé
link.href = makeTextFile(textbox.value+'n '+ParseurTable()); // collecte données à enregistrer
document.body.appendChild(link);
window.requestAnimationFrame(function () {
var event = new MouseEvent('click');
link.dispatchEvent(event);
document.body.removeChild(link);
});

}, false);
})();

function ParseurTable(){

var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
$cells = $(this).find("textarea"),$(this).find("td");
myRows[index] = {};
$cells.each(function(cellIndex) {
myRows[index][$($headers[cellIndex]).html()] = $(this).html();
});    
});
var myObj = {};
myObj.myrows = myRows;
return JSON.stringify(myObj);
}
</script>
</html>

我无法从文本区域检索手动更新的数据,因为它们有innerHtml预填充的内容。解决方案是.val((来获取文本区域的内容

function ParseurTable(){

var table = $("table tbody");
var $headers = $("th");
var total = [];
var nbLignes = total.length;

table.find('tr').each(function (index) {
var $Colonnes = $(this).find('textarea'),
Colonne1 = $Colonnes.eq(0).val(),
Colonne2 = $Colonnes.eq(1).val(),
Colonne3 = $Colonnes.eq(2).val(),
Colonne4 = $Colonnes.eq(3).val();
total[index] = 'A' + (index + 1) +" : "+ Colonne1 +' ; B' + (index + 1) +" : "+ Colonne2 +' ; C' + (index + 1) +" : "+ Colonne3;
});
//alert($("#notes").val());
var myObj = {}; // put data in object and convert to JSON
myObj.myrows = total;
return JSON.stringify(myObj);

最新更新