Tengo la siguiente input y button .
const inputNotice = document.createElement("input"); inputNotice.type = "text"; r.insertCell(26).appendChild(inputNotice.cloneNode(true)); //new button const Noticebutton = document.createElement("button"); Noticebutton.type = "button"; Noticebutton.textContent = "Send Notice"; r.insertCell(26).appendChild(Noticebutton); Estoy tratando de que el input field y el button se coloquen en 1 cell de la tabla, los crea en 2 celdas separadas.
cree un div que tenga entrada y botón como elementos secundarios y luego agregue esto como elemento secundario de la celda de esta manera:
const div= document.createElement('div');
const inputNotice = document.createElement('input');
const Noticebutton = document.createElement("button");
div.appendChild(inputNotice);
div.appendChild(NoticeButton);
Dado que no se proporciona una plantilla html , he tenido una propia para hacer la ilustración.
La idea es agregar ambos elementos dentro de un contenedor y luego agregar ese contenedor a la celda como elemento secundario .
En la siguiente ilustración, he usado un div como contenedor. Siéntase libre de elegir uno de los que se adapte a sus necesidades.
const nonWorkingRow = document.querySelector('#cell-host-non-working'); const inputNotice = document.createElement("input"); inputNotice.type = "text"; // inputNotice.style.display = 'inline block'; nonWorkingRow.insertCell(0).appendChild(inputNotice.cloneNode(true)); //new button const Noticebutton = document.createElement("button"); Noticebutton.type = "button"; Noticebutton.textContent = "Send Notice"; // Noticebutton.style.display = 'inline block'; nonWorkingRow.insertCell(0).appendChild(Noticebutton.cloneNode(true)); const workingRow = document.querySelector('#cell-host'); const container = document.createElement('div'); container.appendChild(inputNotice); container.appendChild(Noticebutton); workingRow.insertCell(0).appendChild(container); .column-bordered-table thead td { border-left: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3; } .column-bordered-table td { border-left: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3; } .column-bordered-table tfoot tr { border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; } <h1>Non Working</h1> <table id="row-host-non-working" class="column-bordered-table"> <tr id="cell-host-non-working" style="outline: thin solid"> <td> <p>Hello</p> </td> </tr> </table> <h1>Working</h1> <table id="row-host-working" class="column-bordered-table"> <tr id="cell-host" style="outline: thin solid"> <td> <p>Hello</p> </td> </tr> </table> WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET
En lugar de insertar una nueva celda dos veces (que es la causa de su problema), hágalo solo una vez y trabaje con la referencia que proporciona insertCell :
const cell = r.insertCell(26); const inputNotice = document.createElement("input"); inputNotice.type = "text"; const Noticebutton = document.createElement("button"); Noticebutton.type = "button"; Noticebutton.textContent = "Send Notice"; cell.append(inputNotice, Noticebutton); Tenga en cuenta que estoy usando append aquí, no appendChild , porque permite pasarle varios elementos en lugar de solo uno.