I have a table whose rows consist of 3 columns. 1º is a checkbox, 2º contains the colors and the 3º contains the hex.

As the user selects the colors desired by ticking the checkboxes, i imagine the colors being pushed into an arrat, that will be written to a cell as the user clicks on the save button.

I've borrowed this snippet from Mark, but it doesn't seem to run in my context:

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

This is the javascript part running to load and populate the table and I'm not sure where the above snippet woud go into:

<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>

CodePudding user response：

Sample of how to get the checked tickboxes an button click

• Assuming all your checkboxes are tied to a row, you can loop through all checkboxes with a query selector,
• access their checked status
• and save the indices of those checkboxes.
• Those indices will be the same as when looping through the corresponding table rows.

Sample implementing a button click event:

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