我有一個表,其行由 3 列組成。1o 是一個復選框,2o 包含顏色,3o 包含十六進制。
當用戶通過勾選復選框選擇所需的顏色時,我想象顏色被推入一個arrat,當用戶點擊保存按鈕時,它將被寫入一個單元格。
我從 Mark 那里借用了這個片段,但它似乎并沒有在我的背景關系中運行:
var checkboxes = document.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i ) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
selectedRows.push(secondColumn);
};
console.log(selectedRows)
}
這是javascript運行以加載和填充表格的部分,我不確定上面的代碼片段會進入哪里:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/**
* Run initializations on sidebar load.
*/
$(function() {
// Assign handler functions to sidebar elements here, if needed.
// Call the server here to retrieve any information needed to build
// the dialog, if necessary.
google.script.run
.withSuccessHandler(function (record) { //<-- with this
showRecord(record);
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, $('#button-bar'));
element.disabled = false;
})
.getRecord();
});
/**
* Callback function to display a "record", or row of the spreadsheet.
*
* @param {object[]} Array of field headings & cell values
*/
function showRecord(record) {
if (record.length) {
for (var i = 0; i < record.length-1; i ) {
// Adds a header to the table
if(i==0){
$('#sidebar-record-block').append($($.parseHTML('<div ><div >Sel</div><div >Color</div><div >Hex</div></div>')));
}
// build field name on the fly, formatted field-1234
var str = '' i;
var fieldId = 'field-' ('0000' str).substring(str.length)
// If this field # doesn't already exist on the page, create it
if (!$('#' fieldId).length) {
var newField = $($.parseHTML('<div id="' fieldId '"></div>'));
$('#sidebar-record-block').append(newField);
}
// Replace content of the field div with new record
$('#' fieldId).replaceWith('<div id="' fieldId '" ></div>');
$('#' fieldId).append('<input type="checkbox" id=CB"' fieldId '"name="checkBox" </input>')
.append($('<div >' record[i].heading '</div>'))
.append('<div >' record[i].cellval '</div>')
}
}
}
</script>
uj5u.com熱心網友回復:
如何通過單擊按鈕獲取選中的復選框的示例
- 假設您的所有復選框都系結到一行,您可以使用查詢選擇器遍歷所有復選框,
- 訪問他們的檢查狀態
- 并保存這些復選框的索引。
- 這些索引將與回圈遍歷相應的表行時相同。
實作按鈕單擊事件的示例:
var saveButton = document.getElementById("myButtonId");
saveButton.onclick = function(){
var checkedRowIndices = [];
$('input[type=checkbox]').each(function( index ) {
if($(this)[0].checked{
checkedRowIndices.push(index);
}
});
};
//now get the rows with those indeices and do something with them
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/419480.html
標籤:
