jQuery, wie eine Tabellenzelle wickeln

StackOverflow https://stackoverflow.com/questions/1664661

  •  12-09-2019
  •  | 
  •  

Frage

Ich würde einen Wrapper um eine Reihe mit jquery hinzuzufügen. Ich habe mehrere Versuche gemacht, aber ich bin nicht in der Lage. Ich bin nur in der Lage über eine HTML-Vorlage hat und das Ausfüllen aber tun orig.html () Ich alle Eingangsauswahlwerte verlieren, die dort waren.

Original html: 

    <table><tbody>
  <tr id="myitem1"><td>I need a coat1</td></tr>
  <tr id="myitem2"><td>I need a coat2</td></tr></tbody></table>

=== Ich möchte jQuery verwenden, um die Zeilen zu wickeln und eine Knopfzelle hinzufügen und ein Ergebnis von: 

 <table><tbody>
  <tr id="myitem1">
   <td>
    <table><tbody>
     <tr><td>I need a coat1</td></tr>
    </tbody></table>
   </td>
   <td><input type="button" value="click1"></td>     
  </tr>
  <tr id="myitem2">
   <td>
    <table><tbody>
     <tr><td>I need a coat2</td></tr>
    </tbody></table>
   </td>
   <td><input type="button" value="click1"></td>
  <tr>
</tbody></table>
War es hilfreich?

Lösung

Ich gehe davon aus, dass Sie alle Spalten in jeder Zeile nehmen wollen, wickeln sie in eine Tabelle in einer einzigen Spalte und dann eine Spalte in den Zeilen hinzufügen. 

$('tr').each( function() {
   $(this).children().wrapAll('<td><table><tr></tr></table></td>');
   $(this).append('<td><input type="button" value="click1"></td>');
});

Andere Tipps

<script>
$(function(){
    var flowbox_table = $('img.flowbox').wrap('<table />');
    var flowbox_tr = $(flowbox_table).wrap('<tr />');
    var flowbox_td = $(flowbox_tr).wrap('<td />');
});
</script>

Verwenden tr[id^='myitem'], um es auszuwählen.

Der Selektor [ ^ = ' '] wählt alle Elemente des tag mit Attribute attr das beginnt mit dem prefix.

Hier ist der gesamte Code: 

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>

function template(pStr, pAttrs) {
    return pStr.replace(/{\$([^}]*)\$}/g, function (a, pName) {
        return pAttrs[pName];
    });
}

const TDReplaceTemplate =
"   <td>"                                              + "\n" +
"    <table><tbody>"                                   + "\n" +
"     <tr>{$OrgTD$}</tr>"                              + "\n" +
"    </tbody></table>"                                 + "\n" +
"   </td>"                                             + "\n" +
"   <td><input type=\"button\" value=\"click1\"></td>" + "\n";

$(document).ready(function() {
    $("tr[id^='myitem']").each(function(aTR) {
        const aOrgTD = $(this).html();
        const aNewTD = template(TDReplaceTemplate, { OrgTD: aOrgTD } );
        $(this).html(aNewTD);
    });
});
</script>
</head>
<body>
<table><tbody>
  <tr id="myitem1"><td>I need a coat1</td></tr>
  <tr id="myitem2"><td>I need a coat2</td></tr>
</tbody></table>
</body>
</html>

Hope, das hilft.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top