2016-06-06 22 views
-4

Ich habe eine Tabelle mit der folgenden Struktur:Duplizieren Inhalt eines TD

<table> 
    <tr> 
    <td> 
     <input type="text" value="abc" /> 
    </td> 
    <td> 
     <input type="text" value="def" /> 
    </td> 
    <td> 
     <input type="text" value="ghi" /> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <select> 
     <option> 
      123 
     </option> 
     <option selected="selected"> 
      456 
     </option> 
     <option> 
      789 
     </option> 
     </select> 
    </td> 
    <td> 
     <select> 
     <option> 
      123 
     </option> 
     <option> 
      456 
     </option> 
     <option> 
      789 
     </option> 
     </select> 
    </td> 
    <td> 
     <select> 
     <option> 
      123 
     </option> 
     <option> 
      456 
     </option> 
     <option> 
      789 
     </option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="radio" checked="checked" /> 
    </td> 
    <td> 
     <input type="radio" /> 
    </td> 
    <td> 
     <input type="radio" /> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="checkbox" checked="checked" /> 
    </td> 
    <td> 
     <input type="checkbox" /> 
    </td> 
    <td> 
     <input type="checkbox" /> 
    </td> 
    </tr> 
</table> 

Hier werden alle 3 Spalten jeder Zeile sind jeweils ähnliche Elemente. Ich möchte jetzt den Inhalt von der 1. td aller Zeilen (alle Eingaben vom Benutzer) zu den anderen 2 tds in 2. und 3. Spalte für alle Zeilen kopieren.

Leider habe ich keine Ahnung, wie ich anfangen soll.

Fiddle.

+2

Sie eine neue Zeile erstellen müssen? –

+1

Bitte klären Sie Ihre Frage. –

+0

@AnoopJoshi: Nein, ich habe schon alles, was ich brauche. Ich muss nur den Inhalt von 1. td zu den anderen 2 tds kopieren. – user1170330

Antwort

1

One way:

$("button").click(function() { 
 
    copy(); 
 
}); 
 

 
function copy() { 
 
    $('tr').each(function() { 
 
    $(this).find('td :input:not(:first)').val($(this).find('td :input:first').val()).prop('checked', $(this).find('td :input:first').prop('checked')) 
 
    }) 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="abc" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="def" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="ghi" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select> 
 
     <option> 
 
      123 
 
     </option> 
 
     <option selected="selected"> 
 
      456 
 
     </option> 
 
     <option> 
 
      789 
 
     </option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select> 
 
     <option> 
 
      123 
 
     </option> 
 
     <option> 
 
      456 
 
     </option> 
 
     <option> 
 
      789 
 
     </option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <select> 
 
     <option> 
 
      123 
 
     </option> 
 
     <option> 
 
      456 
 
     </option> 
 
     <option> 
 
      789 
 
     </option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" /> 
 
    </td> 
 
    <td> 
 
     <input type="radio" /> 
 
    </td> 
 
    <td> 
 
     <input type="radio" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" checked="checked" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<button> 
 
    Copy 
 
</button>