HTML Table onClick函數獲取表格行鍵值

我想創建一個帶有onclick函數的HTML表格來獲取一行的鍵值，到目前爲止，onclick函數正在工作，但它顯示併爲我排空陣列，我該如何解決這個問題。謝謝。HTML Table onClick函數獲取表格行鍵值

我想它是在控制檯日誌中顯示此格式，當你點擊第一行：

{ "name":"Clark", "age":29};

這裏是我的代碼

var table = document.getElementById("tableID"); 
 
if (table != null) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
    table.rows[i].onclick = function() { 
 
     tableText(this); 
 
    }; 
 
    } 
 
} 
 

 
function tableText(tableRow) { 
 
    var myJSON = JSON.stringify(tableRow); 
 
    console.log(myJSON); 
 
}

<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
<thead> 
 
    <tr> 
 
     <th hidden="hidden"></th> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td >Clark</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td >Bruce</td> 
 
     <td>30</td> 
 
    </tr> 
 
</tbody> 
 
</table>

來源

2017-06-02 M.Izzat

你傳遞一個DOM元素（即主機對象）JSON.stringify，你確定要工作？請參閱[*如何將DOM節點序列化爲JSON，即使有循環引用？]（https://stackoverflow.com/questions/32377345/is-there-a-way-to-json-stringify-an-html- DOM-對象的JavaScript）。 – RobG

嗨@RobG感謝您的回覆，我想我走錯了方向。我的目標是獲取整個行對象onClick，以便稍後將其傳遞給稍後編輯REST API框架。現在我只想獲取JSON格式的對象。你能幫助我嗎？謝謝 –

TR的字符串化（串行化）版本是它的[* externalHTML *]（https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML），它可以作爲然後使用HTML解析器將字符串解析回DOM對象。在這種情況下，我認爲JSON是錯誤的工具。 – RobG

我編輯了我的答案，將數據作爲對象返回。運行腳本並看看。

var table = document.getElementById("tableID"); 
 
if (table) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
    table.rows[i].onclick = function() { 
 
     tableText(this); 
 
    }; 
 
    } 
 
} 
 

 
function tableText(tableRow) { 
 
    var name = tableRow.childNodes[1].innerHTML; 
 
    var age = tableRow.childNodes[3].innerHTML; 
 
    var obj = {'name': name, 'age': age}; 
 
    console.log(obj); 
 
}

<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
<thead> 
 
    <tr> 
 
     <th hidden="hidden"></th> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td >Clark</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td >Bruce</td> 
 
     <td>30</td> 
 
    </tr> 
 
</tbody> 
 
</table>

來源

2017-06-02 02:22:13

不幸的是，這是行不通的，請再次提到這個問題，謝謝 –

@M。Izzat現在看看 –

@JosanIracheta非常感謝！如果你不介意我問，如果我有一張更大的桌子。如何通過不必聲明tableRow.childNodes [i] .innerHTML來使其更具動態性; 1 by 1 –

我想您可以使用tr.innerTest來獲取標籤中的值

來源

2017-06-02 02:16:04

我認爲你的意思是* innerText *。在我看來，OP想要連續化整個TR結構，而不僅僅是獲取textContent。 – RobG

如果您正在使用jQuery您可以將事件偵聽添加到表像這樣

$('#tableID').on('click', 'tr', function(e){ 
 
    tableText($(this).html()); 
 
}); 
 

 
function tableText(tableRow) { 
 
    var myJSON = JSON.stringify(tableRow); 
 
    console.log(myJSON); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
</table>

來源

2017-06-02 02:54:51 Lasithds

有很多方法可以做你」之後，但是一個強大和可擴展的方式將是從中獲取屬性名稱表格標題行，然後從被點擊的行中獲取值。

我不知道爲什麼你在標題中隱藏了單元格，它只是使事情變得複雜。如果您將它用於數據，那麼在關聯對象或表或行的屬性中會更好。

function getRowDetails(event) { 
 
    row = this; 
 
    var table = row.parentNode.parentNode; 
 
    var header = table.rows[0]; 
 
    
 
    // Get property names from header cells 
 
    var props = [].reduce.call(header.cells, function(acc, cell) { 
 
    if (!cell.hasAttribute('hidden')) { 
 
     acc.push(cell.textContent); 
 
    } 
 
    return acc; 
 
    }, []); 
 
    
 
    // Get value for each prop from data cell clicked on 
 
    var result = props.reduce(function(acc, prop, i) { 
 
    acc[prop] = row.cells[i].textContent; 
 
    return acc; 
 
    }, {}); 
 
    
 
    // Do something with result 
 
    console.log(result); 
 
    return result; 
 
} 
 

 
// Add listener to body rows, could also put single listener on table 
 
// and use event.target to find row 
 
window.onload = function() { 
 
    [].forEach.call(document.getElementsByTagName('tr'), function(row, i) { 
 
    if (i) row.addEventListener('click', getRowDetails, false); 
 
    }); 
 
}

<table align="center" id="tableID" border="1"> 
 
<thead> 
 
    <tr><th hidden="hidden"></th><th>name</th><th>age</th></tr> 
 
</thead> 
 
<tbody style="cursor: pointer;"> 
 
    <tr><td >Clark</td><td>29</td></tr> 
 
    <tr><td >Bruce</td><td>30</td></tr> 
 
</tbody> 
 
</table>

來源

2017-06-02 04:00:24 RobG

HTML Table onClick函數獲取表格行鍵值

回答

相關問題