0
91
VistasJavascript de matriz bidimensional de bucle
Tengo una matriz y contendrá valores como se muestra a continuación.
SelfData = [ ["Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank"], ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"], ]; Quiero mostrar estos valores en una tabla similar a esta 
Intenté como se muestra a continuación, pero no muestra los valores como se esperaba.
<table> <tr> <th></th> <th>Nature of liability</th> <th>Creditor</th> </tr> <tr> <td>Self</td> <td>{SelfData.map((data,i)=>{ return <tr>{data}</tr> })} </td> </tr> </table>3 Respuestas
Responde la pregunta0
Prueba algo como esto. Utilicé el atributo rowspan en la primera fila de elementos de la tabla para hacer común la columna Self. Por ejemplo, en este ejemplo, dado que la matriz tiene una longitud de 2, el intervalo de filas será 2, por lo tanto, la primera columna seguirá siendo común a todas las filas de la tabla.
<table> <tr> <th></th> <th>Nature of liability</th> <th>Creditor</th> </tr> {SelfData.map((data,i)=>{ return <tr> {i===0 && <td rowSpan={SelfData.length}>Self</td>} <td>{data[0]}</td> <td>{data[1]}</td> </tr> })} </table>0
por favor intente de esta manera:
SelfData = [ ["Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank"], ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"], ]; return ( <table> <tr> <th>Nature of liability</th> <th>Creditor</th> </tr> {SelfData?.map((items, index) => { return ( <tr> <td>SelfSelf</td> {items?.map((subItems, sIndex) => { return <td>{subItems}</td>; })} </tr> ); })} </table>0
Puede usar la propiedad colspan en los elementos td para fusionar la primera columna y la propiedad CSS de vertical-align para alinear el texto en la parte superior de la celda.
Esto también funcionaría
const SelfData = [ [ "Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank" ], ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"] ]; function App() { return ( <table> <tr> <th /> <th style={{ textAlign: "left" }}>Nature of liability</th> <th style={{ textAlign: "left" }}>Creditor</th> </tr> {SelfData.map((data, i) => ( <tr> {i === 0 && ( <td rowspan="2" style={{ verticalAlign: "top" }}> Self </td> )} {data.map((d) => ( <td>{d}</td> ))} </tr> ))} </table> ); } ReactDOM.render(<App/>, document.getElementById("root")) table, th, td { border: 1px solid black; border-collapse: collapse; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>