0
154
VistasTabla HTML: recorre las filas creadas dinámicamente y si el campo en una columna específica contiene una fecha, evita que la fila se edite
Estoy tratando de crear un JavaScript para deshabilitar una fila si EndDate contiene una fecha. La tabla se genera automáticamente, así que pensé en buscar cuántas filas tiene la tabla y comenzar a recorrerlas. Compruebe si los campos de la columna EndDate contienen una fecha. Si esa fila contiene una fecha, deshabilite cualquier campo en esa fila.
Para rastrear los campos, usé esto para verificar si podía deshabilitarlos.
document.getElementById("r0_LineItemCode").disabled = "true"; document.getElementById("r0_LineItemCode_ref_ref").disabled = "true"; document.getElementById("pr0_LineItemCode").disabled = "true"; document.getElementById("r0_ec_type").disabled = "true"; 
Logré recorrer las filas y averiguar cuántas filas hay y mostrar los datos en la consola. Pero ahora, seleccionar ese campo para verificar si contiene una fecha y luego deshabilitar esos elementos de fila falla.
Código para rastrear las filas e iterar a través de las filas:
let text = ""; var endDateFields = []; var rowData = document.querySelector("#RequestLinesGrid_RowIDs"); console.log(rowData); console.log(rowData.value); const rows = rowData.value.split(','); rows.forEach(myFunction); console.log(text); console.log(r0_EndDate); console.log(r1_EndDate); console.log(r2_EndDate); function myFunction(item, index) { text += "indexNumber = " + index + " variableField: " + item + "_EndDate"; var str = item + "_EndDate"; eval(str); console.log(str); }Tengo la sensación de que casi estoy allí, pero necesito un pequeño empujón en la dirección correcta :)
1 Respuestas
Responde la pregunta0
Esta es una lógica simple de su problema, si la date no está vacía, deshabilite todas las inputs del tr principal.
document.querySelector('table').querySelectorAll('td.date').forEach(el => { if (el.innerHTML !== '') { const parentTr = el.parentElement; parentTr.querySelectorAll('input').forEach(input => { input.disabled = true; }); } }); <table> <thead> <th>id</th> <th>input1 Example</th> <th>input2 Example</th> <th>date Example</th> </thead> <tbody> <tr> <td>1</td> <td><input name='test' type='text'></td> <td><input name='test' type='text'></td> <td class='date'>10/10/2021</td> </tr> <tr> <td>2</td> <td><input name='test' type='text'></td> <td><input name='test' type='text'></td> <td class='date'>10/10/2021</td> </tr> <tr> <td>1</td> <td><input name='test' type='text'></td> <td><input name='test' type='text'></td> <td class='date'></td> </tr> </tbody> </table> En lugar de verificar todas las filas, simplemente agregue una clase simple en td have date y luego verifíquelo como mi ejemplo.